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!