1

there is Api - an array:

[
{"id":1,"firstName":"Alex","lastName":"Creel","email":"[email protected]","phone":"(898)979-8452"},
{"id":2,"firstName":"Todd","lastName":"Drek","email":"[email protected]","phone":"(898)979-8452"},
{"id":3,"firstName":"Jim","lastName":"Sparou","email":"[email protected]","phone":"(898)979-8452"},
{"id":4,"firstName":"Tom","lastName":"Limls","email":"[email protected]","phone":"(898)979-8452"},
{"id":5,"firstName":"Jack","lastName":"Retnd","email":"[email protected]","phone":"(898)979-8452"}
]

using fetch, I get Api - an array that becomes a data object (I don’t write App.js code so that the question is not too long) and using the map method, in the form of a table, I display the data I need on the page:

export default props => (
  <table className="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    {props.data.map(item => (
      <tr key={item.id}>
        <td>{item.id}</td>
        <td>{item.firstName}</td>
        <td>{item.lastName}</td>
      </tr>
    ))}
  </tbody>
  </table>
)

there will be such a table on the screen:
enter image description here
But I have this second strange Api:

{"group":{"first":[
{"id":1,"firstName":"Alex","lastName":"Creel","email":"[email protected]","phone":"(898)979-8452"},
{"id":2,"firstName":"Todd","lastName":"Drek","email":"[email protected]","phone":"(898)979-8452"},
{"id":3,"firstName":"Jim","lastName":"Sparou","email":"[email protected]","phone":"(898)979-8452"},
{"id":4,"firstName":"Tom","lastName":"Limls","email":"[email protected]","phone":"(898)979-8452"},
{"id":5,"firstName":"Jack","lastName":"Retnd","email":"[email protected]","phone":"(898)979-8452"}
]}}

and I have a question how can I change this part of the code:

{props.data.map(item => (
      <tr key={item.id}>
        <td>{item.id}</td>
        <td>{item.firstName}</td>
        <td>{item.lastName}</td>
      </tr>

how to make the map method work with my second api on the screen and get exactly the same list of names as with the first api?
I tried like this:

{props.data.group.first.map(item =>

But then the error: TypeError: Cannot read property 'first' of undefined

Improve this question

1 Answer 1

Reset to default
2

If you're trying to accommodate both cases, perhaps you can just do a quick check before you map over the items to see which case you're currently using. For example:

const arr = props.data.group && props.data.group.first ? 
  props.data.group.first : props.data;

arr.map(item => { ... });
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

error: ./src/Table/Table.js Line 16:16: 'item' is not defined no-undef Line 17:14: 'item' is not defined no-undef Line 18:14: 'item' is not defined no-undef Line 19:14: 'item' is not defined no-undef all code in codesandbox: codesandbox.io/s/vibrant-poincare-w47th
I just took a peek... looks like you mean props.item ?
sorry I forgot to add a component of the app,js file in the sandbox, please look again, maybe you will better understand my task and why i have a error. My error after I add your code to project(screenshot): i.piccy.info/i9/c9bf853fbdc10013447813bc4c057c8f/1572207754/…
I see, you appear to be trying to do some things in the JSX itself rather than outside. Please see this fixed version: codesandbox.io/s/sleepy-pine-8hptz
so props.data.group && props.data.group.first will make sure group and first exist before assuming we should use that logic. If they don't exist, then we just use props.data
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.