List doesn't render on first click

Question

I am trying to update the context through the "state" variable here a then render it in another component. The rendering works fine, but not the first time of submitting the form here, only the second time, third time etc. Any idea how to solve this? I tried to move dispatchDataState({ type: "ADD_DATA", payload: state }) into useEffect but then I cannot remove the entered value in the inputs after submitting it. Any idea?

import React, { useContext, useState, useEffect } from "react";
import DataContext from "../store/data-context";

function Form() {
  const [name, setName] = useState("");
  const [secName, setSecName] = useState("");
  const [tel, setTel] = useState("");
  const [note, setNote] = useState("");
  const [state, setState] = useState({
    name: "",
    secName: "",
    tel: "",
    note: "",
  });

  const { dispatchDataState } = useContext(DataContext);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name);
    setState({
      name: name,
      secName: secName,
      tel: tel,
      note: note,
    });
    dispatchDataState({ type: "ADD_DATA", payload: state });
    console.log(state);
  };
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Jméno
          <input
            type="text"
            required
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </label>
        <label>
          Příjmení
          <input
            type="text"
            required
            value={secName}
            onChange={(e) => setSecName(e.target.value)}
          />
        </label>
        <label>
          Telefonní číslo
          <input
            type="text"
            required
            value={tel}
            onChange={(e) => setTel(e.target.value)}
          />
        </label>
        <label>
          Poznámka
          <input
            type="text"
            value={note}
            onChange={(e) => setNote(e.target.value)}
          />
        </label>
        <input type="submit" value="Odeslat" />
      </form>
    </div>
  );
}

export default Form;

David · Accepted Answer · 2022-03-09T21:29:10.470

Part of the problem is: useState set method not reflecting change immediately And you are highly encouraged to read and understand that.

But the root of the problem here seems to be that you are also duplicating state. Storing the same values in multiple state variables and trying to keep them synchronized manually. Why?

Just keep the state values you want:

const [name, setName] = useState("");
const [secName, setSecName] = useState("");
const [tel, setTel] = useState("");
const [note, setNote] = useState("");

And then dispatch the context using those values:

const handleSubmit = (e) => {
  e.preventDefault();
  const state = {
    name,
    secName,
    tel,
    note,
  };
  dispatchDataState({ type: "ADD_DATA", payload: state });
  console.log(state);
};

Or, if you want the "state" to be an object:

const [state, setState] = useState({
  name: "",
  secName: "",
  tel: "",
  note: ""
});

And dispatch that:

const handleSubmit = (e) => {
  e.preventDefault();
  dispatchDataState({ type: "ADD_DATA", payload: state });
  console.log(state);
};

Of course in that case you'd also have to update your change handlers. For example:

<input
  type="text"
  required
  value={state.name}
  onChange={(e) => setState({ ... state, name: e.target.value })}
/>

And so on for your other input fields.

But overall the point is that "state" doesn't replace all possible variables in React. It's just there for, well, storing state. You can create new variables like anywhere else in JavaScript in order to re-structure the data from state for other purposes.

List doesn't render on first click

1 Answers1