Mapping an Object with React.js

Question

I am trying to use the map function to map an object. I've seen similar posts where this has worked using Object.keys but I can't seem to get it to work. I realize that you can't map an object directly.

A portion of my json is below:

{
    "orders": [
        {
            "deadline": 1563046159,
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "id": "83f007d6",
            "name": "Work order 83f007d6",
            "workerId": 1
        },
        {
            "deadline": 1562752687,
            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            "id": "cb23c526",
            "name": "Work order cb23c526",
            "workerId": 1
        },
]
}

Relevant Code

class App extends Component {

state = {
ordersData: [],
workersData : []
}

// fetch for the first time page loads
componentDidMount() {

fetch("https://www.hatchways.io/api/assessment/work_orders")
  .then(response => response.json())
  .then(data => {
    this.setState({
      ordersData: data,
    });
    console.log(this.state.ordersData)
  })
  .catch(err => {
    console.log(err)
  });  
}

render() {
let allOrders = this.state.ordersData.orders;

return (
  <div> 
  {Object.keys(allOrders).map((keyName, i) => (
    <li className="allOrders" key={i}>
        <span className="input-label">key: {i} Name: {allOrders[keyName]} 
 </span>
    </li>
  ))}
  </div>
  )}}

I get this error : TypeError: Cannot convert undefined or null to object

Cal Irvine · Accepted Answer · 2019-07-10 16:46:23Z

1

You are not waiting for your async to resolve before trying to access your async data (this is the first issue, which is causing the error you are seeing.) The component tries to render with default data while componentDidMount is fired.
ordersData is an array in your default state, not an object, so you are accessing it wrong
allOrders is an array, not an object, so you could just map it directly. Then you can use the .keys() method on the results of that map.

To resolve 1 and 2 you should give a more complete default state so that you don't get the TypeError

state = {
    ordersData: {orders:[]},
    workersData : []
}

To resolve 3 you will need to change to something along the lines of:

allOrders.map(order => {
 //now you have each order, you can use Object.keys(order).map() to get each property of the order
}

I hope this makes sense and clears things up. Comment if you have questions about the individual parts.

answered Jul 10, 2019 at 16:46

Cal Irvine

1,1441 gold badge8 silver badges17 bronze badges

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

1 Comment

nastidev Over a year ago

Thank you so much! Saved the day! It worked instantly when I changed the data structure in the state

Collectives™ on Stack Overflow

Mapping an Object with React.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related