How to make this JSX code more generic to avoid code reuse in React?

Question

I'm pretty new to react and I had a question. I have some code that populates some tabs with some info and I wanted some help creating a function that can be reused multiple times instead of reusing the same code for each tab.

<div className="box box-default">
        <div className="box-header with-border">
        <h3 className="box-title">Strings Info</h3>
        <div className="key-details">
            <dl className="dl-horizontal">
                <dt>Count</dt>
                <dd>{count}</dd>
                <dt>Average Length</dt>
                <dd>{avg_length}</dd>
            </dl>
        </div>
        </div>
        <div className="box-header with-border">
            <h3 className="box-title">Strings</h3>
            <div>
                <pre>
                    {this.props.raw_strings}
                </pre>
            </div>
        </div>
    </div>

I was thinking I could create a populateTabs function that can take the count, average length, and the raw string data from the props as a parameter. The count, avg_length, and raw_strings are different for each tab as they each represent a different string type so I've been reusing this block for every tab despite only changing the 3 variables. What is the best way to cut down on the code reuse in this situation? thanks!

Answer 1

The code can be extracted to a component. In case some parameters are common in some cases, it can be higher-order component that accepts common parameters:

const boxHOC = (count, avg_length) => props => (
    <div className="box box-default">
        <div className="box-header with-border">
        <h3 className="box-title">Strings Info</h3>
        <div className="key-details">
            <dl className="dl-horizontal">
                <dt>Count</dt>
                <dd>{count}</dd>
                <dt>Average Length</dt>
                <dd>{avg_length}</dd>
            </dl>
        </div>
        </div>
        <div className="box-header with-border">
            <h3 className="box-title">Strings</h3>
            <div>
                <pre>
                    {props.raw_strings}
                </pre>
            </div>
        </div>
    </div>
);

const OneTwoBox = boxHOC(1, 2);
const ThreeFourBox = boxHOC(3, 4);

Answer 2

React is all about components, so rather than a normal function, you're better off extracting the common markup into a component, which can actually be a "function component" (as opposed to a "class component").

export function PopulateTab({ avgLength, count, rawStrings }) {
  return (<div className="box box-default">
    <div className="box-header with-border">
      <h3 className="box-title">Strings Info</h3>
      <div className="key-details">
        <dl className="dl-horizontal">
          <dt>Count</dt>
          <dd>{count}</dd>
          <dt>Average Length</dt>
          <dd>{avgLength}</dd>
        </dl>
      </div>
    </div>
    <div className="box-header with-border">
      <h3 className="box-title">Strings</h3>
      <div>
        <pre>
          {rawStrings}
        </pre>
      </div>
    </div>
  </div>);
}

if tabsContents is an array of objects like..

const tabsContents = [
  { avgLength: 5, count: 8, rawStrings: "foo" },
  { avgLength: 6, count: 12, rawStrings: "bar" },
];

you can use PopulateTab like so..

import { PopulateTab } from "./populate-tab";

function Tabs({ tabsContents }) {
  return (
    <div>
      {tabsContents.map(
        ({ avgLength, count, rawStrings }) =>
          <PopulateTab avgLength={avgLength} count={count} rawStrings={rawStrings} />
      )}
    </div>
  );
}

or, more concisely..

function Tabs({ tabsContents }) {
  return (<div>{tabsContents.map(props => <PopulateTab {...props} />)}</div>);
}