Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?

Post:{
  Store1: [
     0:{Id:"0001", Business:"Ministop"}
   ]
  Store2: [{
     0:{Id:"0002", Business:"Grocery Store"}
  }]
  Store3: [
     0:{Id:"0003", Business:"Seven Eleven"}
  ]
  Store4: [
     0:{Id:"0004", Business:"Big Store"},
     1:{Id:"0005", Business:"Medium Store"}
  ]
}

This is the sample output:

**Store 1**
   **Id      Business**
   0001    Ministop
**Store 2**
   **Id      Business**
   0002    Grocery Store
**Store 3**
   **Id      Business**
   0003    Seven Eleven
**Store 4**
   **Id      Business**
   0004    Big Store
   0005    Medium Store

I have this code and I've got an error this.state.post.map is not a function

render() {
   const groupList = this.state.post.map((data, index) => {
       return  (
           <div key={index}>
              <div>{data}</div>
           </div>
       )
   });

   return (
     <div>{groupList}</div>
   )
} 

Thank you

Hi I have this list array of object in react js and I don't know how to display in my render view. Anyone can give an idea on how to do it?

Post:{
  Store1: [
     0:{Id:"0001", Business:"Ministop"}
   ]
  Store2: [{
     0:{Id:"0002", Business:"Grocery Store"}
  }]
  Store3: [
     0:{Id:"0003", Business:"Seven Eleven"}
  ]
  Store4: [
     0:{Id:"0004", Business:"Big Store"},
     1:{Id:"0005", Business:"Medium Store"}
  ]
}

This is the sample output:

**Store 1**
   **Id      Business**
   0001    Ministop
**Store 2**
   **Id      Business**
   0002    Grocery Store
**Store 3**
   **Id      Business**
   0003    Seven Eleven
**Store 4**
   **Id      Business**
   0004    Big Store
   0005    Medium Store

I have this code and I've got an error this.state.post.map is not a function

render() {
   const groupList = this.state.post.map((data, index) => {
       return  (
           <div key={index}>
              <div>{data}</div>
           </div>
       )
   });

   return (
     <div>{groupList}</div>
   )
} 

Thank you

• javascript
• arrays
• reactjs

• You will have to loop over data and create an array of React.NodeElement. Then just put it in render – Rajesh Commented Nov 15, 2018 at 5:42
• We will be able to help you quicker if you could share an attempt that did not work – Ahmad Commented Nov 15, 2018 at 5:44
• updated @Ahmad and rajest – Jay Ar Viluan Commented Nov 15, 2018 at 5:50
• can you post you render function? – Robsonsjre Commented Nov 15, 2018 at 5:59
• @Robsonsjre updated thanks – Jay Ar Viluan Commented Nov 15, 2018 at 6:01

2 Answers 2

This is how you map it. just change post with this.state.post

const post = {
  Store1: [
    { Id: '0001', Business: 'Ministop' }
  ],
  Store2: [
    { Id: '0002', Business: 'Grocery Store' }
  ],
  Store3: [
    { Id: '0003', Business: 'Seven Eleven' }
  ],
  Store4: [
    { Id: '0004', Business: 'Big Store' },
    { Id: '0005', Business: 'Medium Store' }
  ]
};

console.log(Object.keys(post).reduce((acccumilator, iterator) => {
  return [...acccumilator, ...post[iterator]];
}, []));

/*
  Object.keys(this.state.post).reduce((acccumilator, iterator) => {
    return [...acccumilator, ...post[iterator]];
  }, []).map(data => {
    return  (
           <div key={data.id}>
              <div>{data.Business}</div>
           </div>
       )
  })
*/

map is not a method of an object. You can map over its keys using Object.keys.

render() {
   const groupList = Object.keys(this.state.post).map((key) => {
       return  (
           <div key={key}>
              <div>{this.state.post[key]}</div>
           </div>
       )
   });

   return (
     <div>{groupList}</div>
   )
}

However, there are other problems once you fix that but you should try to solve them yourself and ask other questions if you can't