How to show a different div in react 16 when a boolean changes from false to true?

Question

I have a basic form in a react 16 app. Upon successful submission of the form I am switching a variable from false to true and I then want to display a different div once the boolean is switched.

Here is my variable declaration and form submit function:

var formSubmitted = false;
const formObj = {};

const requestInfo = (formObj) => {
     formObj.modelNumber = product.modelNumber
     submitForm(formObj)
        .then(value => {
            formSubmitted = true;
            console.log(formSubmitted);
     }, reason => {
         // rejection
     });
};

Here is the conditional HTML:

<div>Always showing</div>

{ !formSubmitted &&
  <div>Form has not been submitted</div>
}

{ formSubmitted &&
  <div>Form submitted successfully</div>
}

The form is submitting successfully and the console.log is showing the variable formSubmitted was successfully switched from false to true, however the HTML is not changing. I'm new to react 16 and I'm not sure how to update the component.

Thank you.

You can't just declare it like a regular variable, it has to be in the state. Only state and prop changes trigger a re-render and update the DOM in React — Jayce444, Nov 13 '20 at 22:30

score 1 · Accepted Answer · answered Nov 13 '20 at 22:38

Although the variable of formSubmitted had changed, no state or side effects were triggered, so it didn't trigger the React render function hence the changes you expect are not reflecting on the DOM. You can use useState to manage the boolean value of formSubmitted so every new assignment will trigger 'render' to update the UI. Here is a snippet:

const [formSubmitted, setFormSubmitted] = useState(false);
const formObj = {};

const requestInfo = (formObj) => {
     formObj.modelNumber = product.modelNumber
     submitForm(formObj)
        .then(value => {
            setFormSubmitted(true);
            console.log(formSubmitted);
     }, reason => {
         // rejection
     });
};
...
<div>Always showing</div>

{ !formSubmitted &&
  <div>Form has not been submitted</div>
}

{ formSubmitted &&
  <div>Form submitted successfully</div>
}

And that should work.

How to show a different div in react 16 when a boolean changes from false to true?

1 Answers1