CODEWITHSUNDEEP
javascriptfor-in-loop
George Bleasdale
George Bleasdale

Reputation: 351

For..in is only returning the first item - React js

I'm looping through an object to return values. The code works fine when I console.log the result but doesn't work when I try to render it as text. For some reason it only returns the first value. What am I doing wrong?

Here's the code:

  testFunc = () => {

let spaceship = {
    crew: {
    captain: {
        name: 'Lily',
        degree: 'Computer Engineering',
        cheerTeam() { console.log('You got this!') }
        },
    'chief officer': {
        name: 'Dan',
        degree: 'Aerospace Engineering',
        agree() { console.log('I agree, captain!') }
        },
    medic: {
        name: 'Clementine',
        degree: 'Physics',
        announce() { console.log(`Jets on!`) } },
    translator: {
        name: 'Shauna',
        degree: 'Conservation Science',
        powerFuel() { console.log('The tank is full!') }
        }
    }
};

for(let crewMember in spaceship.crew){
   return spaceship.crew[crewMember].name
}

 }


render(){
  return(
    <div>
     {this.testFunc()}
    </div>
  )
}

New code, that doesn't render

  testFunc = () => {

let spaceship = {
    crew: {
    captain: {
        name: 'Lily',
        degree: 'Computer Engineering',
        cheerTeam() { console.log('You got this!') }
        },
    'chief officer': {
        name: 'Dan',
        degree: 'Aerospace Engineering',
        agree() { console.log('I agree, captain!') }
        },
    medic: {
        name: 'Clementine',
        degree: 'Physics',
        announce() { console.log(`Jets on!`) } },
    translator: {
        name: 'Shauna',
        degree: 'Conservation Science',
        powerFuel() { console.log('The tank is full!') }
        }
    }
};

return Object.entries(spaceship.crew).map(member =>  member.name)

}

render(){ return( {this.testFunc()} ) }

Upvotes: 2

Views: 1043

Answers (1)

reisdev
reisdev

Reputation: 3383

The problem is that, in the first iteration of your for loop, the function returns and ends up. The possible solution for this is:

testFunc = () => {

   let spaceship = {
      crew: {
         captain: {
            name: 'Lily',
            degree: 'Computer Engineering',
            cheerTeam() { console.log('You got this!') }
         },
         'chief officer': {
            name: 'Dan',
            degree: 'Aerospace Engineering',
            agree() { console.log('I agree, captain!') }
         },
         medic: {
            name: 'Clementine',
            degree: 'Physics',
            announce() { console.log(`Jets on!`) } },
            translator: {
               name: 'Shauna',
               degree: 'Conservation Science',
               powerFuel() { console.log('The tank is full!') }
            }
         }
   };
   var names = []
   for(var key in spaceship.crew){
       names.push(spaceship.crew[key].name)
   }

   return names // Return an array with the names
}

And then, in the rendering, you should do:

render(){
   return(
      <div>
         {this.testFunc().map(name => <p> name </p>)}
      </div>
   )
}

Upvotes: 2

Related Questions