Skip to content

Instantly share code, notes, and snippets.

@praveen-me
Created Jan 13, 2019
Embed
What would you like to do?
React code for hooks-todo.
import React, { useState } from 'react';
import './scss/App.scss'
function App() {
const [todoValue, setTodoValue] = useState('');
const [todos, setTodo] = useState([])
const handleChange = e => {
setTodoValue(e.target.value);
}
const handleSubmit = e => {
e.preventDefault();
const todo = {
value: todoValue,
done: false
}
if(!todoValue) return;
setTodo([...todos, todo]);
document.getElementById('todoValue').value = ''
}
const handleDelete = e => {
const { id } = e.target.parentElement;
todos.splice(id, 1)
setTodo([...todos]);
}
const handleDone = e => {
const { id } = e.target.parentElement;
todos[id].done = !todos[id].done
setTodo([...todos])
}
return (
<div className="todo-list">
<h1 className="head"> Todo List (React Hooks)</h1>
<div className="todos">
{
todos && todos.map((todo, i) => (
<div className="todo-block" key={todo.value} id={i}>
<button className={todo.done ? 'done' : 'not-done'} onClick={handleDone}>{todo.value}</button>
<button className="delete-todo" onClick={handleDelete} >x</button>
</div>
))
}
</div>
<form className="todo-form" onSubmit={handleSubmit}>
<input type="text" id="todoValue" onChange={handleChange}/>
<button type="submit">Add Todo</button>
</form>
</div>
)
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment