title: Passing props to component via variable
body: <p>I have a class component which renders an input and a tooltip and controls state. The <code>&lt;SelectInputType&gt;</code> components job is to take a single prop of 'type' and render either a text input, a textarea, a select input or a checkbox group component. There are a load of props that need to be passed through this SelectInputType component, some of which are relevant to all 4 of the input components (placeholderText and required for example) and some of which are specific to a particular input (options for example is only relevant to checkboxes and select inputs).</p>
  
  <pre><code>render() {
      const inputProps = {};
      inputProps.placeholderText = this.props.placeholderText;
      inputProps.required = this.props.required;
      inputProps.class = this.props.class;
      inputProps.value = this.props.value;
      inputProps.options = this.props.options;
      inputProps.updateText = this.handleInput;
      inputProps.handleFocus = this.focusIn;
      inputProps.handleBlur = this.focusOut;
      inputProps.handleCheckboxChange = e =&gt; this.addCheckboxToList(e);
      inputProps.closeCheckboxSelector = this.closeCheckboxSelector;
      inputProps.readableSelectedCheckboxes = this.state.readableSelectedCheckboxes;
  
      const inputClass = classNames('input-with-tooltip', {
        focus: this.state.focus,
        'step-complete': this.state.completed,
      });
  
      return (
        &lt;div className={inputClass}&gt;
          &lt;InputTooltip
            tooltipText={this.props.tooltipText}
            completed={this.state.completed}
          /&gt;
          &lt;div className="drill-creation-input"&gt;
            &lt;SelectInputType type={this.props.type} {...inputProps} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>My SelectInputType component looks like this...</p>
  
  <pre><code>const SelectInputType = (props) =&gt; {
    let component;
    if (props.type === 'title') {
      component = &lt;TextInput /&gt;;
    } else if (props.type === 'text') {
      component = &lt;TextareaInput /&gt;;
    } else if (props.type === 'checkbox') {
      component = &lt;CheckboxInput /&gt;;
    } else if (props.type === 'select') {
      component = &lt;SelectInput /&gt;;
    }
  
    return (
      &lt;div&gt;
        {component}
        // Need to pass props through to this?
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>I am using the JSX spread attribute to pass the props down to the SelectInputType component, but I don't know how to then pass these on to the 4 input components (and if I do pass them on will I have errors with certain props not being valid on particular components?)</p>