score:1

Accepted answer

try to use the index.

reactdom.render((
<div>
    {players.map((user, i) => {
        return ( 
           <card 
                 key={i} 
                 img={players[i].image} 
                 name={players[i].name} 
                 position={players[i].position}
           /> 
        )
     });
    }
</div>),
document.getelementbyid('root'));

score:0

there is a typo in your code

instead of

players.foreach(player, index)

your code should be

players.foreach((player, index)

you are missing a (

score:0

you need to use map instead of foreach

reactdom.render((
  <div>
    {players.map((player, index) => {
      return (
        <card
          key={index} // if you objec has a id field use it instead //of map index 
          img={player.img}
          name={player.name}
          position={player.position}
        />
      )
    });
    }
  </div>),
  document.getelementbyid('root'));

score:0

you should use the map iterator instead of foreach. also, please validate the data in your players.js file the data is not valid json data. the data should be proper json data, otherwise you would get the error. see the following corrected data.

export const players =[
    {
        image : "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/01/09/15470342504519.jpg",
        name : 'keylor navas',
        position : "gk"
    },
    {
        image : "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/01/09/15470342504519.jpg",
        name : 'sergio ramos',
        position : "cb"
    }
]

score:0

# players.js
const players = [
  {
      image: "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/01/09/15470342504519.jpg",
      name: 'keylor navas',
      position: "gk"
  },
  {
      image: "https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/01/09/15470342504519.jpg",
      name: 'sergio ramos',
      position:"cb"
  }
]
export players

# index.js
const mylist = players.foreach( (player, index) => {
          <card key={index} img={player.image} name={player.name} position={player.position}/>
      })

reactdom.render(<div>{mylist}</div>, document.getelementbyid('root'));

Related Query

More Query from same tag