title: Add component props if condition in React
body: <p>I have a <strong>React</strong> Input component, and I want it to display an error icon if a condition is true. Currently I achieve it through an <code>if</code> condition that renders a component with the icon when the condition is true, and another component without it otherwise:</p>
  
  <pre><code>   if (field_meta.error) {
        return (
          &lt;FormControl fullWidth margin="normal"&gt;
            &lt;InputLabel style={{color: "red"}} htmlFor={field_meta.name}&gt;{field_meta.title}&lt;/InputLabel&gt;
            &lt;Input
              id={field_meta.name}
              defaultValue={field_meta.value? field_meta.value: ""}
              onChange={this.handleChange}
              margin="normal"
              startAdornment={  // ***** This is the props that depends on the condition
                &lt;InputAdornment position="start"&gt;
                  &lt;i style={{color: "red"}} className="zmdi zmdi-alert-circle zmdi-hc-fw"/&gt;
                &lt;/InputAdornment&gt;
              }
            /&gt;
            &lt;FormHelperText style={{color: "red"}}&gt;{field_meta.error}&lt;/FormHelperText&gt;
          &lt;/FormControl&gt;
        )
      } else {
          return (
              &lt;FormControl fullWidth margin="normal"&gt;
                  &lt;InputLabel htmlFor={field_meta.name}&gt;{field_meta.title}&lt;/InputLabel&gt;
                  &lt;Input
                    id={field_meta.name}
                    defaultValue={field_meta.value? field_meta.value: ""}
                    onChange={this.handleChange}
                    margin="normal"
                  /&gt;
              &lt;/FormControl&gt;
          )
      }
  </code></pre>
  
  <p>I think there must be a more efficient way for doing this without rendering two complete different components depending on the condition, probably by conditioning the inclusion of the specific props only, but I can't find how to do so.</p>