Помогите пожалуйста, не получается передать правильно значение input в state. Хочу при клику создать новое сообщение, текст взять из state. Если пушить значение через функцию addText, то пушиться каждый символ. App.js
import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid'
import './App.css';
import AddTaskForm from './AddTaskForm/AddTaskForm';
import Task from './Task/Task';
function App() {
const [todo, setTodos] = useState([
{id: uuidv4(), text: 'go home'}
]);
let addText = (e, id) => {
const index = todo.findIndex(item => item.id === id);
const todos = {...todo[index]};
todos.text = e.target.value;
console.log(todos.text);
const copyTodo = [...todo];
copyTodo[index] = todo;
setTodos(copyTodo);
};
let addTodo = (e, id) => {
const index = todo.findIndex(item => item.id === id);
const todos = {...todo[index]};
todos.text = e.target.value;
const copyTodo = [...todo];
copyTodo[index] = todos;
copyTodo.push({id: uuidv4(), text: todos.text});
setTodos(copyTodo);
};
let AddTasks = todo.map(item => {
return <AddTaskForm key={item.id} text={item.text} onRemove={() => removeTask(item.id)} />
});
return (
<div className="App">
<Task onChange={(e) => addText(e, todo.id)} onClick={(e) => addTodo(e, todo.id)}/>
{AddTasks}
</div>
);
}
export default App;
Task.js
const Task = props => {
return (
<div className='task'>
<input placeholder='Add new task' className="task_input" onChange={props.onChange} />
<button className="task_add" onClick={props.onClick}>Add</button>
</div>
)
};
export default Task;
AddTaskForm.js
const AddTaskForm = props => {
return (
<div className='task_wrapper'>
<h5 className="task_text">{props.text}</h5>
</div>
)
};
export default AddTaskForm;