javascript - Hiding a component with React -

i have couple of react classes in code. when app fires up, user presented 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 result works because when click button above turns state false true. returns underneath input fields. rather replaced input fields above. how can achieved?

in summary, once user enters user name , email , hits submits, want code render on page instead of input fields rather beneath

declare output variable within render() method:

let output; 

^{note: use var if you're not supporting es6.}

then use conditional statement populate 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 return output within render() method's return statement:

return (   <div>     <h1 classname="headings" id="heading"> football </h1>     {output}     <thanks />   </div> )