title: ReactJS: Create reusable table row component with dynamic content
body: <p>In my application, I have the following code which I want to make reusable. I tried to make a component based on the following code, however the <code>&lt;td&gt;</code> content has several type and can vary. In some cases I need the content of the first <code>&lt;td&gt;</code> to be a string, while in other cases I need it to be a <code>&lt;Button&gt;</code>. </p>
  
  <p>How can I achieve dynamic content like this in the first <code>&lt;td&gt;</code> of a reusable component?</p>
  
  <pre><code>const educationList = props.education.map(edu =&gt; (
    &lt;tr key={edu.id}&gt;
      &lt;td&gt;{edu.school}&lt;/td&gt;
      &lt;td&gt;{edu.degree}&lt;/td&gt;
      &lt;td&gt;
        &lt;Moment format="YYYY/MM/DD"&gt;{edu.from}&lt;/Moment&gt; -
        {edu.to === null ? (
          ' Now'
        ) : (
          &lt;Moment format=" YYYY/MM/DD"&gt;{edu.to}&lt;/Moment&gt;
        )}
      &lt;/td&gt;
  
      &lt;td&gt;
        &lt;Button
          className="btn btn-danger"
          text="Delete"
          onClick={() =&gt; props.deleteEducation(edu.id)}
        /&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  ))
  </code></pre>