Render array which contains arrays of objects as data table in React

Question

I want to render table, but I have a problem to render data properly.

This is just one row inside tableData array. tableData is array which contains 10 arrays like this.

 [
      { key: 'date', value: date },
      {
        key: 'opp',
        value: oppositeTeam.contestantName || '',
        handleClick: handleClick({ ...oppositeTeam, entityType: 'Team' })
      },
      { key: 'g', value: totalGoals || '' },
      { key: 'yc', value: yellowCards || '' },
      { key: 'rc', value: redCards || '' }
    ];

I am rendering table on next way:

renderTableData() {
    const { tableData } = this.state;
    const { addCustomAttribute } = this.props;

    return tableData.map((data) => (
      <tr>
        {data.map((item) => (
          <td title={item.value} key={item.id}>
            <a
               onClick={() => {
                 if (item.handleClick) item.handleClick;
               }}
            >
              {value !== null ? value : 'n/a'}
            </a>
          </td>
        ))}
      </tr>
    ));
  }

How to improve this data or logic to work together as expected?

What is the issue you are having right now with the current code? — palaѕн
– palaѕн, Commented May 25, 2020 at 12:49

Nilesh Kant · Accepted Answer · 2020-05-25 12:56:50Z

3

I think you missed item in value.

Replace

{value !== null ? value : 'n/a'}

to

{item.value !== null ? item.value : 'n/a'}

or in a short way

{item.value || 'n/a'}

edited May 25, 2020 at 12:56

answered May 25, 2020 at 12:52

Nilesh Kant

3572 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Render array which contains arrays of objects as data table in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related