Re-Render Conditional Rendered Components in React

Question

I have a component that takes some input and then when I submit that input on click, the submit-on-click function will set a useState hook to true ( setBoolInput(true) ), then in my App.js file, will render an additional component because if(boolInput) passes as true.

Now if I if click that same submit button again, it doesn't re-render my additional component because my state is already set to true, even if I change my inputs.

I am trying to figure out where in my code I can setBoolInput to false again so I can re-render the additional component with updated inputs when I hit submit. So essentially, how to re-render conditional renders?

You could try using setTimeout depending on how long you want the component to be rendered. After some period of time has passed, the piece of state that is responsible for keeping track of whether the component is visible could be set to false. — greenBox

Mauj Mishra Mauj Mishra · Accepted Answer · 2021-03-09T08:03:45

The reason its not causing re-render is because react uses a concept called virtual DOM which only updates the DOM when something has changed. In your case the component you rendered is already rendered from the first click so it wont re-render again. Here is something you can try -

function App() {
  const inputRef = React.useRef();
  const [inputValue, setInputValue] = React.useState();

  return (
    <div>
      <input type = 'text' ref = {inputRef} />
      <button onClick = {() => setInputValue(inputRef.current.value)}>Click Me!</button>
      <p>{inputValue}</p>
    </div>
  )
}

Re-Render Conditional Rendered Components in React

1 Answers