Reactで親コンポーネントにuseStateの中身を渡したい

Question

前提・実現したいこと

こんにちは！Reactでtodoを作っています。
新しいtodoを生成するためのinputの値を取得するために、子コンポーネントで
useStateを作りました。しかし、親コンポーネントに新しいtodoを
作る処理をする関数を書きたいのでなんとしてもこの子コンポーネントのtextを
親コンポーネントにもっていきたいです。

これを実現するにはどのような方法があるか教えてください。
また、みなさんならどうされますか？？

該当のソースコード

import { useState } from 'react';

const AddTodoForm = (props) => {
  const { todos, onClickAddTodo } = props;

  console.log(`渡ってきたtodos${todos}`);

  const [text, setText] = useState('');

  const onChangeTodoText = (event) => {
    setText(event.target.value);
  };

  return (
    <>
          <input
            type='text'
            className='p-addTodo__inputText'
            value={text}
            placeholder='...'
            onChange={onChangeTodoText}
          />
        <button className='c-btn p-addTodo__btn' onClick={onClickAddTodo}>
          Add Todo
        </button>
    </>
  );
};

export default AddTodoForm;

Comments

[hoshi-takanori]

親コンポーネント側で useState　して、text や setText を子コンポーネントに渡しましょう。

[mii--]

回答ありがとうございます！！

Answer 1

なんやろ、質問したいことは、onClickAddTodo() に引数として　<input /> から入力された文字列を渡したい、ということなのであれば

- <button className='c-btn p-addTodo__btn' onClick={onClickAddTodo}>
+ <button className='c-btn p-addTodo__btn' onClick={() => onClickAddTodo(text)}>

とすれば、ええのとちゃいます？ それか、もう少しお行儀良く書くのやったら、 onClickAddTodo(text) んとこ、{・・・}でくくって、

- <button className='c-btn p-addTodo__btn' onClick={onClickAddTodo}>
+ <button className='c-btn p-addTodo__btn' onClick={() => { onClickAddTodo(text); }}>

とするとか。まあこないな横着せんで、

const handleAddTodo = () => {
  onClickAddTodo(text);
};

ゆう関数作っといて、

<button className='c-btn p-addTodo__btn' onClick={handleAddTodo}>

にしとけば、何やらいっぱしのReactプログラマーっぽいコードになるんやないかな、と思いますわ。

Comments

[mii--]

まさにやりたいことこれです！ありがとうございます！！
説明が上手くできてないにもかかわらず
やりたいことを汲み取っていただいてありがとうございます！