CODEWITHSUNDEEP
javascriptreactjs
Michel James
Michel James

Reputation: 75

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

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?

Upvotes: 1

Views: 163

Answers (1)

Nilesh Kant
Nilesh Kant

Reputation: 359

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'}

Upvotes: 3

Related Questions