How to avoid repeating JSX / HTML code in react?

Question

I am building the UI in react.js and want to improve my JSX /HTML code to be smaller.

At the moment my JSX code takes around 70 lines of code.

This is what I am building:

And my One of the problems is that in some sentences one or more words need to be bolder.

I would like to solve that in a better way than the below implemented code.

Please find below my code HTML / JSX:

    <div className="search-help" ref={(node) => this.setWrapperRef(node)}>
        <div className="search-help-content">
          <div className="search-help-header">
            <p>Use Specific Keywords for smarter filtering - English only</p>
          </div>
          <div className="search-help-sections">
            <div className="search-help-left-content">
              <p className="search-help-section-title">Logical Operator</p>
              <ul className="search-help-list">
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    AND
                    <span className="search-help-label-sub">
                      "TX Group" <b>AND</b> "Latest News"
                    </span>
                  </p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    NOT
                    <span className="search-help-label-sub">
                      "Pochettino" <b>NOT</b> "Mourinho"
                    </span>
                  </p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    OR
                    <span className="search-help-label-sub">
                      "Cristobal Huet" <b>OR</b> "Nico Hischier"
                    </span>
                  </p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">
                    ( )
                    <span className="search-help-label-sub">
                      <b>(</b>"Jeff Bezos" <b>OR</b> "Bill Gates" <b>OR</b>
                      <b>(</b> "Jack Dorsey"<b>)</b> <b>AND</b> <b>(</b>"Climate Change"<b>)</b>
                    </span>
                  </p>
                </li>
              </ul>
            </div>
            <div className="search-help-right-content">
              <p className="search-help-section-title">Language</p>
              <ul className="search-help-list">
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">lang:de</p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">lang:eng</p>
                </li>
                <li className="search-help-label-spacing">
                  <p className="search-help-label-main">lang:fr</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

Any advice or idea?

Answer 1

It seems extracting your <li> into a component might be a good start. Build a component, say, MyListItem and extract all repeating code there. Actual unique text will be passed there through props.

To pass different bits of text into different places you can use different props like so:

<li className="search-help-label-spacing">
  <p className="search-help-label-main">
    {this.props.binaryOperator}
    <span className="search-help-label-sub">
      "{this.props.string1}" <b>{this.props.binaryOperator}</b> "{this.props.string2}"
    </span>
  </p>
</li>