reactjs - Appending JSX Block Rather Than Repeating Block Based on Condition

Question

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).

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?

This is the function:

  renderIDFilter = () => {
    if (this.props.filters.id) {
      return (
        <SearchBox
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this._onFilterById}
          styles={{ iconContainer: { display: "none" }, root: { maxWidth: 300 } }}
          borderless
          underlined
          iconProps={{ 
            style: { pointerEvents: 'auto', cursor: 'pointer' },
            iconName: 'clear', onClick: () => { 
              this.clearFilter('ID');
            }
          }}
      />
      )
    } else {
      return (
        <SearchBox
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this._onFilterById}
          styles={{ iconContainer: { display: "none" }, root: { maxWidth: 300 } }}
          borderless
          underlined
      />
      )
    }
  }

question from:https://stackoverflow.com/questions/65848267/appending-jsx-block-rather-than-repeating-block-based-on-condition

Answer 1

Try something like this:

renderIDFilter = () => {
      return (
        <SearchBox
          label="ID:"
          defaultValue={this.props.filters.id}
          onChange={this._onFilterById}
          styles={{ iconContainer: { display: "none" }, root: { maxWidth: 300 } }}
          borderless
          underlined
          iconProps={this.props.filters.id?{ 
            style: { pointerEvents: 'auto', cursor: 'pointer' },
            iconName: 'clear', onClick: () => { 
              this.clearFilter('ID');
            }
          }:null or undefined or {}}
      />
      )
    }