Блог

 Parent Component :

const AddTodo = () => {
    const [todoList, setTodoList] = useState(['No active Todos'])


Child Component:

export const Todos = (props) => {
return (
<i class="material-icons close_icon">
clear
</i>
)
 

Теперь вопрос в том, предположим todoList , что в массиве есть какие-то элементы/задачи или даже если он пуст. Итак, как я могу вызвать setTodoList функцию из дочернего компонента(Todos), чтобы обновить todoList массив по щелчку <i> элемента?

Передавая setState в качестве опоры, вы достигаете этого:

Родительский компонент :

 const AddTodo = () => {
    const [todoList, setTodoList] = useState(['No active Todos'])
    return(
        <div>
            {todoList}
            <Todos setTodoList={setTodoList}/>
        </div>
    )
}
 

Дочерний компонент:

 export const Todos = ({setTodoList}) => {
return (
<i class="material-icons close_icon"
 onClick={()=>setTodoList("")}>
clear
</i>
)
}