📚

【React】連想配列にデータを入れる

2022/03/14に公開
// state宣言
const [todos, setTodos] = useState([]);
const [taskTitleText, setTaskTitleText] = useState('');
const [taskDetailText, setTaskDetailText] = useState('');
const [taskStatus, setTaskStatus] = useState('');

// クリックして連想配列に要素を追加する処理
const onClickAdd = () => {

  // stateから値を取って追加したいobjectを作る
  const taskObj = {
      title: taskTitleText,
      status: taskStatus,
      detail: taskDetailText,
  }

  // スプレッド構文で新しい配列に作ったobjectを追加
  const newTask = [...todos, taskObj];
  
  // 新しく作った配列を元の配列stateにセット
  setTodos(newTask);

  // stateをリセット
  setTaskTitleText('');
  setTaskDetailText('');
  setTaskStatus('');

};

Discussion