title: Conditional rendering based on user input
body: <p>I've just started learning React and am struggling with conditional rendering. I want to render components based on form input but i'm not sure what needs to be done or where it needs to be executed.</p>
  
  <p>I have imported my Form component which has the input I want to use and have another component like this:</p>
  
  <pre><code>import React, {Component} from 'react';
  import Form from './Form';
  import CardOne from './CardOne';
  import CardTwo from './CardTwo';
  import CardThree from './CardThree';
  
  export default class CardContainer extends Component {
    render(){
      return (
        &lt;div&gt;
          &lt;CardOne /&gt;
          &lt;CardTwo /&gt;
          &lt;CardThree /&gt;
       &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>I basically want to be able to show certain Cards if the value of the input is greater than X when the form is submitted, but I don't know how to target an imported component. </p>
  
  <p>This is my Form component:</p>
  
  <pre><code>export default class Form extends Component {
    state = {
      number: ''
    };
  
    change = (e) =&gt; {
      this.setState({
        [e.target.name]: e.target.value
      });
    };
  
    onSubmit = e =&gt; {
      e.preventDefault();
      this.props.onSubmit(this.state);
      this.setState({
        number: ''
      })
    };
  
    render(){
      return (
        &lt;form&gt;
          &lt;label&gt;Number&lt;/label&gt;
          &lt;input
          type="number"
          name="number"
          placeholder="Number"
          value={this.state.number}
          onChange={e =&gt; this.change(e)} /&gt;
  
          &lt;button onClick={e =&gt; this.onSubmit(e)}&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
      )
    }
  }
  </code></pre>
  
  <p>Any help will be massively appreciated! </p>