ReactJS: Create reusable table row component with dynamic content

Question

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 <td> content has several type and can vary. In some cases I need the content of the first <td> to be a string, while in other cases I need it to be a <Button>.

How can I achieve dynamic content like this in the first <td> of a reusable component?

const educationList = props.education.map(edu => (
  <tr key={edu.id}>
    <td>{edu.school}</td>
    <td>{edu.degree}</td>
    <td>
      <Moment format="YYYY/MM/DD">{edu.from}</Moment> -
      {edu.to === null ? (
        ' Now'
      ) : (
        <Moment format=" YYYY/MM/DD">{edu.to}</Moment>
      )}
    </td>

    <td>
      <Button
        className="btn btn-danger"
        text="Delete"
        onClick={() => props.deleteEducation(edu.id)}
      />
    </td>
  </tr>
))

Are you just hoping to render something different in the component dependent on a field like edu.type? — tr3online
– tr3online, Commented Feb 16, 2019 at 19:32

Dacre Denny · Accepted Answer · 2019-02-16 21:46:37Z

If I understand your question correctly, perhaps you could define a generic <TableRow> component as shown below, where:

the same general table row structure is defined and can be reused
the contents of the first <td> of the <TableRow> can be specified externally, allowing you to render dynamic content into the common surrounding row structure

TableRow

/* Define TableRow functional component. This allows reuse of code for general row
structure while also allowing external control over the contents of the first <td> 
*/
const TableRow = (props) => {

    const { education } = props;

    return (<tr key={education.id}>
        { /* Render the children components of this TableRow via props.children */ }
        <td>{ props.children }</td>
        <td>{education.degree}</td>
        <td>
        <Moment format="YYYY/MM/DD">{education.from}</Moment> -  
        {education.to === null ? ' Now' : <Moment format=" YYYY/MM/DD">{education.to}</Moment> }
        </td>
        <td>    
        <Button
            className='btn btn-danger'
            text='Delete'
            onClick={() => props.deleteEducation(education.id)} />
        </td> 
    </tr>)
}

Usage

{ /* Example of how to use TableRow */ }
const educationList = props.education.map(edu => ( 
    <React.Fragment>

        { /* Render a button in first <td> of table row */ }
        <TableRow education={edu} deleteEducation={this.deleteEducation} >
            <button>Example button row</button>
        </TableRow>

        { /* Render another table row with string in first <td> of table row */ }
        <TableRow education={edu} deleteEducation={this.deleteEducation} >
            { `Example string row` }
        </TableRow>

    </React.Fragment>))

Please note, the purpose of this usage example is to illustrate how <TableRow> can be used to render different types of content in the first <td> of your common table row structure and is not indicative of how you would actually make use this component in your code.

Hope this helps!

kenodek · Accepted Answer · 2019-02-16 19:36:04Z

0

That's already a component but stateless. If you want to make it a class it should looks like that

class EducationList extends React.Component() {
constructor(){
    super()
}

const educationList = props.education.map(edu => ( 
    <tr key={edu.id}>
       <td>{edu.school}</td>
       <td>{edu.degree}</td>
       <td>
          <Moment format="YYYY/MM/DD">{edu.from}</Moment> -  
          {edu.to === null ? ' Now' : <Moment format=" YYYY/MM/DD">{edu.to}</Moment> }
       </td>

       <td>    
          <Button
             className='btn btn-danger'
             text='Delete'
             onClick={() => props.deleteEducation(edu.id)}
          />
       </td> 
    </tr>
 ));  

 render() {
     return(
        {educationList}
     )
 }

}

answered Feb 16, 2019 at 19:36

kenodek

3721 gold badge2 silver badges13 bronze badges

1 Comment

Anass TIssir Over a year ago

don't forget to export it xD

Collectives™ on Stack Overflow

ReactJS: Create reusable table row component with dynamic content

2 Answers 2

TableRow

Usage

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

TableRow

Usage

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related