How can I loop, return and render an object in react

Question

I have an object that looks like this:

{
  "startups" : {
    "startup0":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Hog dog or not Hot dog",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  },
  "startup1":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Big Brother",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  }
  }

}

I initialize my state in this form:

this.state={
      startups:[]

Here I call to firebase to set my state:

 componentDidMount(){
    const rootRef = firebase.database().ref().child('startups')
    rootRef.once('value', snap =>{
      this.setState({

        startups: this.state.startups.push(snap.val())

      });
    }

);

} I have tried looping in different ways: 1.

formatStartUps(){
   const startups = [this.state.startups];
   startups.forEach((element)=>{console.log(element)} )
 }

2.

formatStartUps(){
       const startups = [this.state.startups];
       startups.map((startup,index)=>{<p key={index}>{startup}</p>))
     }

3.

formatStartUps(){
           const startups = [this.state.startups];
           for(let startup of startups){
            console.log(startup)
            }
         }

And then I call to the fire-base database to set my state and works, but I can't loop to each startup to render these values in my div.

How can I loop this object and render each value in my render() method? I appreciate the help

I din't see any code for loop which you have tried.

Ved
– Ved

2017-07-23 10:52:56 +00:00
Commented Jul 23, 2017 at 10:52 — Ved
– Ved, Commented Jul 23, 2017 at 10:52

Andrii Starusiev · Accepted Answer · 2017-07-23 11:08:36Z

1

If startups an object

Object.keys(startups).map((startup) => {
  return (
    <div>{startups[startup].proyect_name}</div> //for example
  )
})

answered Jul 23, 2017 at 11:08

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

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

Comments

Ved · Accepted Answer · 2017-07-23 11:12:07Z

Use: Object.keys(objectName) to loop the object

var data = {
  "startups" : {
    "startup0":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Hog dog or not Hot dog",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  },
  "startup1":{
    "achievements" : "Is done!",
    "how_build" : "In python and using google visio api",
    "inspiration" : "All the hot dogs in the world",
    "proyect_name" : "Big Brother",
    "team" : {
      "Steven Anderson" : {
        "area" : "CEO",
        "email" : "[email protected]",
        "expertise" : "full-stack engineer"
      }
    },
    "what_does" : "Say is the image is a hot dog or not"
  }
  }

}

Object.keys(data.startups).map(function(property){
   console.log(data.startups[property].achievements);
  
})

Vikram Saini · Accepted Answer · 2017-07-23 11:02:16Z

0

you can do something like that

render{
    return(
       <div>
        {
    this.state.startups.map(function(startups,i)
      {

    <li key={i}>{startups.achievements}</li>//in whatever element you want to print

      },this)
         }


        </div>
 )
 }

for more details read map or forEAch in es6

edited Jul 23, 2017 at 11:02

answered Jul 23, 2017 at 10:55

Vikram Saini

2,7521 gold badge21 silver badges33 bronze badges

2 Comments

Steven Daniel Anderson Over a year ago

It return this TypeError: this.state.startups.map is not a function

Vikram Saini Over a year ago

make sure that your object is an array if you use map function

Collectives™ on Stack Overflow

How can I loop, return and render an object in react

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related