Array seems filled untill i try to use it

Question

I have an Object with an array of items which I want to map through. When I console.log the Object it will return the Object and the filled array.

output from the console.log(this.props.pkmns)

{
  "pkmns": [
    {
      "url": "http://pokeapi.salestock.net/api/v2/pokemon-species/1/",
      "name": "bulbasaur"
   },
    {
      "url": "http://pokeapi.salestock.net/api/v2/pokemon-species/2/",
      "name": "ivysaur"
    },
    {
      "url": "http://pokeapi.salestock.net/api/v2/pokemon-species/3/",
      "name": "venusaur"
    }
  ]
}

When i specifically console.log the array it returns empty.

output from console.log(this.props.pkmns.pkmns):

[]

And the code

class PkmnContainer extends React.Component {
  componentDidMount(props){
    return this.props.startPkmn()
}

  render(){
    return(
      <div>
        {console.log(this.props.pkmns)}
        {console.log(this.props.pkmns.pkmns)}
        {this.props.pkmns.pkmns.map((pkmns)=>{
          <p>{pkmns}</p>
        })}
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    'pkmns': state.pkmns
  }
}

const mapDispatchToProps = dispatch => ({
  startPkmn: () => {
    return dispatch.pkmns.start()
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(PkmnContainer);

What should I do to be able to map through this array?

full code here

can you put your code in sandbox or jssfiddle beacause what you are doing as per the code your provided seems to be correct — aravind_reddy, Jun 12 '18 at 10:02
I'm guessing this is a combination of https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays and https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — JJJ, Jun 12 '18 at 10:02
I think this post can help you, https://stackoverflow.com/questions/40125854/how-does-the-map-function-work-in-react-js a bit — anitab, Jun 12 '18 at 10:13

score -4 · Answer 1 · answered Jun 12 '18 at 09:54

-4

this.props.pkmns.pkmns.map((pkmns)=>{
      <p>{pkmns}</p>
    })

There seems to be a typo and a pkmns too many. Trys with this.props.pkmns.map.

answered Jun 12 '18 at 09:54

adz5A

2,012
9
10

Array seems filled untill i try to use it

1 Answers1