App.js
import React from “react”
import TodoList from “./components/TodoList”;
function App() {
return (
<div className=”App”>
<TodoList/>
</div>
);
}
export default App;
TodoList.js
import React, {useState} from “react” // useState import ettik
import AddNewTodo from “./AddNewTodo”
const TodoList =() => { //functional component oluşturuyoruz
const [todos, setTodos] = useState([ //useState kullanarak dizi oluşturduk
{id:1, task:”Faturaları öde”},
{id:2, task:”Arabayı yıka”}
])
const addTodo =(text)=> { // todos dizisine eleman eklemek için fonksiyon yazdık
// text parametresi ile AddNewTodo componentinden veriyi aldık
setTodos([
…todos,
{id:Math.random(), task:text}] // text parametresini kullandık
)
}
return(
<div>
<lu>
{
todos.map (todo=>{ // todos dizisini maple
return(
<li key={todo.id}>{todo.task}</li>
)
})
}
</lu>
{/*<button onClick={addTodo} >Add a todo</button> button onClick olayında fonksiyonu çağır*/}
<AddNewTodo addTodo={addTodo}/> {/* Props olarak ekledik*/}
</div>
)
}
export default TodoList;
AddNewTodo.js
import React,{useState} from “react”
const AddNewTodo =({addTodo})=> { // addTodo parametresi
const [todo, setTodo]=useState(“”)
const onFormSubmit = e =>{
e.preventDefault() // submit ettiğimde formu yeniden yükleme
addTodo(todo) // addTodo fonksiyonuna todo verisini gönder (gelen boş propsu doldurup gönder)
setTodo(“”) // text kutusunun içini boşalt
}
return(
<form onSubmit={onFormSubmit}>
<label htmlFor=”todo”/>
<input type=”text” id=”todo” value={todo} /* text boşaltmak için*/ onChange={(e) => setTodo(e.target.value)} /> {/*text kutusuna her giriş yapıldığında içindeki veriyi setTodo ya gönder*/}
<input type=”submit”/>
</form>
)
}
export default AddNewTodo;
