하위 컴포넌트에서 상위 컴포넌트로 state보내기

출처 https://velog.io/@bellecode20/하위-컴포넌트에서-상위-컴포넌트로-state-전송하기

하위 컴포넌트에서 상위 컴포넌트로 state 전송하기

 

1. 부모 컴포넌트에서 useState 만들기

  const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);

1. setTodo를 자식 컴포넌트에게 props로 전송한다.
   (1) 컴포넌트 렌더링 하는 부분(부모컴포넌트에서)에 props전송

  return (
    <>
      <TodoCount todos={todos}></TodoCount>
      <TodoList todos={todos}></TodoList>
      <AddTodo setTodos={setTodos}></AddTodo>
    </>
  );

(2) 렌더링하고싶은 부분에 {데이터}쓰기

function TodoCount({ todos }) {
  return <div>Total Todos:{todos.length}</div>;
}

(3) state바꾸는 컴포넌트는 set어쩌구로

  return(
  ...
  <AddTodo setTodos={setTodos}></AddTodo>
  ...

function AddTodo({ setTodos }) {
  function handleSubmit(event) {
    event.preventDefault();
    const todo = event.target.elements.todo.value;
    setTodos((prevTodos) => [...prevTodos, todo]);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" id="todo"></input>
      <button type="submit">Add Todo</button>
    </form>
  );
}