The worm The worm - 28 days ago 22
HTML Question

Hiding a component with React

I have a couple of react classes in my code.
When the app fires up, the user is presented with this:

<div>
<h1 className="headings" id="heading"> Football </h1>
<input type="text" placeholder="name" />
<input type="email" placeholder="use noths email" />
<input type="submit" onClick={() => this.handleClick()}/>
{ this.state.results ? <Decision /> : null }
<Thanks />
</div>


The state for result works because when i click the button above it turns the state from false to true.
this then returns underneath the input fields. but i would rather that it replaced the input fields above. how can this be achieved?

in summary, once the user enters the user name and email and hits submits, i want the code to render on the page INSTEAD of the input fields rather than beneath

Answer

Declare your output as a variable within your render() method:

let output;

Note: use var if you're not supporting ES6.

Then use a conditional statement to populate the variable:

if (this.state.results) {
  output = <Decision />;
}
else {
  output = (
    <div>
      <input type="text" placeholder="name" />
      <input type="email" placeholder="use noths email" />
      <input type="submit" onClick={() => this.handleClick()}/>
    </div>
  )
}

Now simply return the output within the render() method's return statement:

return (
  <div>
    <h1 className="headings" id="heading"> Football </h1>
    {output}
    <Thanks />
  </div>
)