title: Appending JSX Block Rather Than Repeating Block Based on Condition
body: <p>In my React app I have a function that returns one block of JSX or another based on a condition. This works as expected. The thing is, the only difference between the two blocks is that in the second case an icon is included, to allow for clearing the search text, since text now exists. When there is no text the icon is not included (hence the other condition).</p>
  <p>While this is working, I'm wondering, since the only difference between the two blocks of code is the inclusion of the icon, if there is a way I can just append it somehow, rather than repeating the block of code, as I am doing now?</p>
  <p>This is the function:</p>
  <pre><code>  renderIDFilter = () =&gt; {
      if (this.props.filters.id) {
        return (
          &lt;SearchBox
            label=&quot;ID:&quot;
            defaultValue={this.props.filters.id}
            onChange={this._onFilterById}
            styles={{ iconContainer: { display: &quot;none&quot; }, root: { maxWidth: 300 } }}
            borderless
            underlined
            iconProps={{ 
              style: { pointerEvents: 'auto', cursor: 'pointer' },
              iconName: 'clear', onClick: () =&gt; { 
                this.clearFilter('ID');
              }
            }}
        /&gt;
        )
      } else {
        return (
          &lt;SearchBox
            label=&quot;ID:&quot;
            defaultValue={this.props.filters.id}
            onChange={this._onFilterById}
            styles={{ iconContainer: { display: &quot;none&quot; }, root: { maxWidth: 300 } }}
            borderless
            underlined
        /&gt;
        )
      }
    }
  </code></pre>