Iterating over object and displaying as table - React.js

Question

I have an object:

{
  cities: { 
    MCR: "Manchester",
    LDN: "London",
    NYC: "New York"
  }
}

and I want to iterate over these and display them in a table format which will show the city code and the long name next to it. Something like:

 <tbody>
          <tr>
            <th>City Code</th>
            <th>City Name</th>
          </tr>
            <tr>
              {Object.entries(cities).map(([key, value]) => {
                <>
                <td>{key}</td>
                <td>{value}</td>
                </>
              }
            )}
          </tr>
    </tbody>

However this doesn't display anything and also shows an error when hovering over value:

Type 'unknown' is not assignable to type 'ReactNode'.ts(2322)

I'm quite new to React and wondering how best to display this information?

Thanks

DecPK · Accepted Answer · 2022-07-02 18:02:56Z

2

let say you have an object as:

  const obj = {
    cities: {
      MCR: "Manchester",
      LDN: "London",
      NYC: "New York"
    }
  };

It would be better to loop over cities and create a new tr so that It looks like a table

CODESANDBOX LINK

You want to map over the cities then you should return it from map as:

<tbody>
      <tr>
        <th>City Code</th>
        <th>City Name</th>
      </tr>
      { Object.entries( obj.cities ).map( ( [key, value] ) => {
        return (   // PROBLEM SHOULD RETURN
          <tr>
            <td>{ key }</td>
            <td>{ value }</td>
          </tr>
        );
      }
      ) }
    </tbody>

answered Jul 2, 2022 at 18:02

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

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

Comments

Majed Badawi · Accepted Answer · 2022-07-02 18:05:26Z

1

You need to return the result in each iteration. Also, each iteration would return a tr with a key prop:

{
  Object.entries(obj.cities).map(([key, value]) => (
    <tr key={key}>
      <td>{key}</td>
      <td>{value}</td>
    </tr>
  ))
}

Note: since city is a key in an object, you'll need to access it as above

answered Jul 2, 2022 at 18:05

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Comments

YSLdev · Accepted Answer · 2022-07-02 18:10:13Z

0

You are just missing the return in your map's callback function. Always remember to include a return in your arrow functions when using it like this: () => {}. It is easy to miss because ()=>() would return whatever you write in the second () but in the former example this is not true.

answered Jul 2, 2022 at 18:10

YSLdev

3026 silver badges12 bronze badges

Collectives™ on Stack Overflow

Iterating over object and displaying as table - React.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related