score:1
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'));
Source: stackoverflow.com
Related Query
- How Do I Pass on an Array of Objects using "forEach" Function?
- React: How to present array of objects using map() function
- How to pass array objects or store them in reducer using interface and how does filter works on it?
- how to pass array of objects one component to other component in react js using ref callback
- How do I pass my Array of Objects through dispatch using redux
- How do you pass data when using the navigate function in react router v6
- How to update an object in an array of Objects using setState
- How to save big array of objects in react native using react-native-db-model
- How to validate individual element of an array of JSON objects using Yup
- How can I send a file within an array of objects using formData.append()
- how to pass the current item to the function so that i can remove it from array in react component?
- How to pass a field of datasource as parameter of onclick function in a table row using ant and ReactJs?
- React how to conditionally edit or add object in array of objects using setState
- How to pass React Component prop to child function using {children}?
- How to update the array of objects using onChange handler in React JS?
- React : how to pass and array from inside a Function to the return (JSX)
- How to pass function from FUNCTIONAL to CLASS component and access it outside of render( without prop ), using context in react js?
- How do I pass props and other parameters to function using React Hooks?
- How to return only 1 item in an array in react using map function
- How to pass state value to a callback function using React Hooks
- Fetching the input value from textarea in a loop from an array of objects using reactjs. How to do so?
- pass an array of objects to a dropdown (select) using typescript
- how to pass an function in window.addEventListener using react js
- how to pass array in grpc call using reactjs
- ReactJS: How to inject component and pass variable in extended component instead using function
- How to use spread operator to delete an object from array of objects using spread operator using react?
- how do i update state in react for updating the value of an object inside an array using array.map function
- How can I pass a function as a prop to a React component using react-router <Redirect />?
- How to assign response from Api to an array using fetch function
- How to add more objects to Array Object state using setState?
More Query from same tag
- How to validate date inputs?
- How to render the same component 5 times?(clone component)
- Invalid hook call - React Redux
- React with Kendo-ui Grid - Wrong column header
- react-google-maps pass props on marker click
- Changing button label on click with grommet?
- Paasing props to MUI Box component overrider (Typescript)
- How to use checkbox to complete tasks in a to do list?
- How to open an url and download without being block
- Select all checkboxes / rows - React hooks app
- Google Authentication With React-Google-Login issue when redirecting
- Can not set initial data to child component because it is undefined on page load
- How to remove item from a generic Array in React Typescript?
- how can I control mobx observer?
- ReactJS toggle burger menu
- React Native Fetch data from API - BUT not render in flat list, just single time
- How can i get :params from location?
- How do i set the state from one API call and use the data for URL in next API call?
- UseRef issue in UseEffect
- What lifecycle method is the proper one to run validations in child component on button click in another child component?
- TabContent in react-bootstrap & componentClass props
- Multiple child routes in React-router
- Material-UI List as children of Card, fires all onClick on main expand
- Using functional setState in forms
- Scroll from bottom to top in a text message like modal with React
- Use params in react Link and get the value of it in another component?
- Webpack import from files that use module.exports
- Animate background gradient using styled-components
- Fetch data in only one key object
- looping the array of json object in reactjs