无法使用附加元素访问更新的 state

Question

I'm creating JSX element with the onClick on the button:

      <div onClick={() => addWeek()} >
        add week
      </div>

then I update state (add new items to array):

//my state that has one object initially (I want to add more)
  const [weekly, setweekly] = useState([
    {
      id: 'n1',
      day_week: null,
      start_time: null,
      end_time: null,
    },
  ]);
    const addWeek = () => {
        setweekly([
          ...weekly,
          {
            id: `n${weekly.length + 1}`,
            day_week: null,
            start_time: null,
            end_time: null,
          },
        ]);
    }

after I create JSX element I have an onChange event on that element:

NOTE: This element created with onClick and I have two objects inside my state now.

       <select
            onChange={(event) => handleWeekly(event)}
            id={`n${weekly.length + 1}`}
          >
//Some options
         </select>

but in here I can't access the updated state I get one object.

  const handleWeekly = (event) => {
   // I get one object
    console.log(weekly);

  };

CODE SAND BOX: https://codesandbox.io/s/strange-nightingale-l6qg3?file=/src/App.js:0-1372

Answer 1

I would approach this problem differently. Instead of putting markup in the state you can map through your data and render your components this way:

export default function App() {
  const [weeks, setWeek] = useState([
    {
      id: "n1",
      day_week: null,
      start_time: null,
      end_time: null
    }
  ]);
  const addWeek = () => {
    setWeek([
      ...weeks,
      {
        id: `n${weeks.length + 1}`,
        day_week: null,
        start_time: null,
        end_time: null
      }
    ]);
  };

  const handleWeekly = (event) => {
    console.log(weeks);
  };

  return (
    <div className="App">
      <div onClick={() => addWeek()}>add week</div>
      {weeks.map((week) => {
        return (
          <select
            onChange={(event) => handleWeekly(event)}
            id={`n${week.id}`}
            key={`n${week.id}`}
          >
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
          </select>
        );
      })}
    </div>
  );
}

It's easier to keep track of your state this way.

Sandbox Example