React İle Todo List yapımı
import React, { Component } from 'react';
import TodoApp from './educate/Todo/TodoApp';
class App extends Component {
render() {
return (
<div className="container">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<TodoApp />
</div>
);
}
}
export default App;
import React, { Component } from 'react';
import Todos from "./Todos";
import AddTodo from './addTodo'
class TodoApp extends Component {
state = {
todos: [
{id:1, container:'Finish React Tutorial'},
{id:2, container:'Start React with Firebase'},
{id:3, container:'React wit NodeJs and PortSql'}
]
}
deleteTodo = (id) =>{
console.log(id);
let todos2 = this.state.todos.filter(i => {
return i.id !== id
})
this.setState({
todos: todos2
});
}
addTodo = (todo) => {
//Önce statenin bir kopyasını al, child componenten gelen state yi de kopyasını aldığın state'ye ekle son olarak setState ile stateni güncelle
todo.id = Math.random();
console.log(todo);
let todos = [...this.state.todos, todo];
this.setState({
todos: todos
});
}
render(){
return(
<div className="app">
<Todos todos={this.state.todos} deleteTodo={this.deleteTodo} />
<AddTodo addTodo={this.addTodo} />
</div>
)
}
}
export default TodoApp;
import React, { Component } from 'react'
class addTodo extends Component {
state = {
container:'',
id: null
}
handleChange = (e) => {
this.setState({
container: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault();
this.props.addTodo(this.state);
this.setState({
container:''
});
}
render() {
return (
<form className="form form-group" onSubmit={this.handleSubmit}>
<label>Enter Todo : </label>
<input type="text" onChange={this.handleChange} value={this.state.container} />
<button className="btn btn-primary">Submit</button>
</form>
)
}
}
export default addTodo;
aaaa
import React from 'react';
const Todos = ( {todos, deleteTodo} ) => {
let ListTodos = todos.map(todo => {
return (
<div className="jumbotron" key={todo.id}>
<p className="lead" onClick={() => {deleteTodo(todo.id)}}> {todo.container}</p>
</div>
);
})
return(
<div>
{ListTodos}
</div>
);
}
export default Todos;
Yorumlar
Yorum Gönder