const curTodos = useRef({});

  const handleClickOpen = (o) => {
    console.log(o);
    curTodos.current = o;
    setOpen(true);
  };


  const allTodos = todos.map((o) => {
    console.log("re-render");
    return (
      <>
        <div key={o.id} className="row">
          <span>{o.name}</span>
          <span>{o.id}</span>
          <span>{o.email}</span>
          <span>{o.task}</span>
          <Button onClick={() => handleClickOpen(o)} variant="outlined">
            Edit Todo
          </Button>
        </div>
      </>
    );
  });

I want:

curTodos is a reference to todo object

When I click on edit todos I want the default value to be set to the one on the rows.

Since its already rendered this wont work it just shows up as empty input.

CodePudding user response：

useState(default) value runs only once on mount. Since you're using a component that does not unmount in this view, you can include an effect to update the form state.

// in FormModal
  useEffect(() => {
    setName(o.name)
    setTask(o.task)
  }, [o]);