React Conditional state update not working

Question

I am trying to create a form where user can create course paid/free , If paid then choose the price but if free price=0,

This is my default state:

  const [values, setValues] = useState({
    name: "",
    description: "",
    category: "",
    price: 500,
    paid: true,
    uploading: false,
    loading: false,
  });

Problem: If I click paid course my default price is 500 , which is the first price of the price list. But when I change to Free Course, state changes to "paid:false" but last selected price stayed like the picture below

Any Idea how to change! I have tried a few ways but nothing worked. Please help thank you❤️

I have tried to change it before sending it to backend, still didn't work.

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if(values.paid == false) {
        setValues({...values, price: 0})
      }
      const { data } = await axios.post("/api/course/create-new-course", {
        ...values,
        image,
      });
      router.push("/instructor");
      toast.success("Continue adding lessions");
    } catch (err) {
      console.log(err);
      toast.error(err.response.data);
    }
  };

This is my Create component: [create_course.js](https://github.com/DebanjanT/debug/blob/main/state_error.js) — Debanjan Tewary, Jan 09 '22 at 18:04
This is my form component: [createCourseForm.js](https://github.com/DebanjanT/debug/blob/main/CreateCourseForm.js) — Debanjan Tewary, Jan 09 '22 at 18:06
@RohitKashyap sry bro, I am not sure how to create codesandbox — Debanjan Tewary, Jan 09 '22 at 18:08
its a sandbox where can you write your code and develop your application. Just what you do locally but online. You can google codesandbox, it's pretty straight forward. You can create this scenario there and share the link here so we can debug — Rohit Kashyap, Jan 09 '22 at 18:09

Saeed Shamloo · Accepted Answer · 2022-01-09T18:16:49.810

Try to update your paid field in the CreateCourseForm like this:

 <select
      value={values.paid ? '1' : '0'}
      onChange={(e) => {
        const isPaid = e.target.value == '1';
        setValues({ ...values, price: isPaid ? 500 : 0 , paid: isPaid })
      }}
      className="select select-bordered select-secondary w-full lg:w-4/5 mb-3 rounded-none lg:rounded-lg"
    >
      <option value={'0'}>
        Free Course
      </option>
      <option value={'1'}>₹ Paid Course</option>
    </select>

score 0 · Answer 2 · answered Jan 09 '22 at 18:14

Calling setState() in React is asynchronous, for various reasons (mainly performance). Under the covers React will batch multiple calls to setState() into a single state mutation, and then re-render the component a single time, rather than re-rendering for every state change.

Fortunately, the solution is rather simple - setState accepts a callback parameter:

So try this :-

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if(values.paid == false) 
        setValues(prevValues => ({...prevValues, price: 0}));
      
      const { data } = await axios.post("/api/course/create-new-course", {
        ...values,
        image,
      });
      router.push("/instructor");
      toast.success("Continue adding lessions");
    } catch (err) {
      console.log(err);
      toast.error(err.response.data);
    }
  };

Its working but for the first time its sending with pre-filled price, if I submit again then its working, You can see the result with the console response on the above image — Debanjan Tewary, Jan 09 '22 at 18:29

React Conditional state update not working

2 Answers2