How to update React state with a data object using hooks

Question

I have a component with a date picker and a would like to change the value of the date picker in the state, using hooks, and also the date in the date picker itself, so you can select a date, or you can click a button to set a date, like 30 days ago.

this is what I tried so far:

const MyComp = () => {

  const [formData, setFormData] = useState({
    dateFrom: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
    dateTo: new Date()
  });

  const handleDateClick = interval => {
    setFormData({...formData, dateFrom: new Date(Date.now() - interval * 24 * 60 * 60 * 1000)});
    setFormData({...formData, dateTo: new Date()});
  };

  const handleOnChange = e => {
    setFormData({...formData, [e.target.name]: e.target.value});
  };

  return (
    <Button onClick={() => handleDateClick(30)} variant="secondary">30 days ago</Button>

    <DatePicker
      selected={formData.dateFrom}
      name="dateFrom"
      dateFormat="MMMM d, yyyy"
      onChange={value => handleOnChange({target: {name: "dateFrom", value}})}
    />
);

}

clicking the button has no effect, not even displaying any error, the state is not updated and the value in the datepicker does not change? Any idea please?

Does the `onClick` handler gets triggered at all? Meaning does `handleDateClick` get called when you click the button? — goto, Feb 14 '20 at 17:52
How can we guess from where `DatePicker` comes from? How it implemented? Which library is it? — Dennis Vash, Feb 14 '20 at 17:52
@goto yes handleDateClick is triggered and I can console.log(interval) and see the value — user3174311, Feb 14 '20 at 17:53
@DennisVash this is really not important, the important thing is to update the state, the the datepicker will display the value — user3174311, Feb 14 '20 at 17:54
@goto1 maybe because the button is passing 7 and 7 is in the state? try onClick={() => handleDateClick(30). — user3174311, Feb 14 '20 at 18:04
I mean I keep clicking the button and the state changes no problem. I get something like the following - `{"dateFrom":"2020-02-07T17:57:08.918Z","dateTo":"2020-02-14T18:04:39.571Z"}` — goto, Feb 14 '20 at 18:05
it is only the dateTo changing I suppose. I think the line not working is ```setFormData({...formData, dateFrom: new Date(Date.now() - interval * 24 * 60 * 60 * 1000)});``` — user3174311, Feb 14 '20 at 18:14
Both are changing - you are using `new Date()` which will always yield a different result every time you click, plus you're changing both values in the state. — goto, Feb 14 '20 at 20:33

score 1 · Accepted Answer · answered Feb 14 '20 at 22:56

The reason why you're seeing a strange behavior is because your handleDateClick is calling setFormData twice in a row, which is a problem because setFormData it is asynchronous, meaning that it will not immediately reflect and update your state.

See this SO question for more details:

useState set method not reflecting change immediately

So, essentially what ends up happening is that you update dateFrom but then call setFormData again right after, and since it uses old state, you're never seeing an updated value for dateFrom.

const handleDateClick = interval => {
  setFormData({ ...formData, dateFrom: ... })

  // uses the value of `dateFrom` from the "old state"
  // when you do `...formData`, then updates `dateTo`
  setFormData({ ...formData, dateTo: ... })
}

I suggest you combine all your updates inside handleDateClick into a single setFormData call. From what it looks like, there's no reason for you to have two separate calls.

Here's how you should approach this instead:

function Button({ children, ...rest }) {
  return <button {...rest}>{children}</button>;
}

function MyComp() {
  const [formData, setFormData] = React.useState({
    dateFrom: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
    dateTo: new Date()
  });

  const handleDateClick = interval => {
    setFormData({
      dateTo: new Date(),
      dateFrom: new Date(Date.now() - interval * 24 * 60 * 60 * 1000)
    });
  };

  return (
    <>
      <Button onClick={() => handleDateClick(30)}>Click me!</Button>
      <p>
        <b>State:</b> {JSON.stringify(formData)}
      </p>
    </>
  );
}

Here's a working example if you'd like to see:

CodeSandbox

How to update React state with a data object using hooks

1 Answers1