title: React.js - Show/Hide dynamically generated elements from component
body: <p>I'm generating form field elements using a component template importing an array of data. I want to be able to hide some of these elements and show them when some other's element's criteria has been met; this is fairly common in form fields, e.g. When you select item A, form field X appears, when you select item B, form field X is hidden.</p>
  
  <p>I've read a fair bit on <a href="https://reactjs.org/docs/conditional-rendering.html" rel="noreferrer">conditional rendering</a> on the React docs site but these examples don't really work for what I'm doing although the Preventing Component from Rendering section is close.</p>
  
  <p>I <a href="https://codepen.io/paulcredmond/pen/qpmWVX?editors=1010" rel="noreferrer">made a Codepen</a> demoing my setup, what I want to do is show the second field if the criteria for the first field is met (in this example, the first field should have 5 characters entered). I've passed through a prop to set the initial hiding but how can I find that specific hidden element and unhide it?</p>
  
  <pre><code>// Field data
  const fieldData = [{
      "type": "text",
      "label": "First",
      "name": "first",
      "placeholder": "Enter first name",
      "hidden": false
    }, {
      "type": "text",
      "label": "Surname",
      "name": "surname",
      "placeholder": "Enter surname",
      "hidden": true
    }];
  
    // Get form data
    class FormData extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          items: props.data
        };
      }
  
      render() {
        let els = this.state.items;
  
        return els.map((el, i) =&gt; {
            return &lt;Input key={i} params={el} /&gt;
        });
      }
    }
  
    // Input builder
    class Input extends React.Component {
        constructor(props) {
            super(props);
  
            // Keep state value
            this.state = {
                value: '',
                valid: false,
                hidden: this.props.params.hidden
            };
  
            this.handleChange = this.handleChange.bind(this);
        }
  
        handleChange(e) {
            this.setState({
                value: e.target.value,
                valid: e.target.value.length &lt; 5 ? false : true
            });
        }
  
        render() {
            // Element attributes
            const {type, label, name, placeholder, hidden} = this.props.params;
            const isValid = this.state.valid === true ? &lt;span&gt;Valid! Should show Surname field.&lt;/span&gt; : &lt;span&gt;Not valid. Should hide Surname field.&lt;/span&gt;;
  
            if (!hidden) {
              return (
              &lt;div&gt;
                  {label ? &lt;label htmlFor={name}&gt;{label}&lt;/label&gt; : null}
                  &lt;input
                      type={type}
                      name={name}
                      placeholder={placeholder || null}
                      value={this.state.value}
                      onChange={this.handleChange}
                  /&gt;
                  {isValid}
              &lt;/div&gt;
              );
            } else {
              return null;
            }
        }
    }
  
    // App
    class App extends React.Component {
  
      render() {
        return (
          &lt;div&gt;
              &lt;h1&gt;Show/Hide test&lt;/h1&gt;
              &lt;p&gt;What we want here is the surname to appear when firstname has a value (say, it has 5 characters) and hide surname when firstname doesn't.&lt;/p&gt;
              &lt;FormData data={fieldData} /&gt;
          &lt;/div&gt;
        );
      }
    }
  
  
    ReactDOM.render(
        &lt;form&gt;
          &lt;App /&gt;
        &lt;/form&gt;,
        document.getElementById('app')
    );
  </code></pre>