I am trying to create a card based UI which takes data from the data.js file and fills in the onformation in the cards I have created a data.js file with the following data.
export default [
{
name: 'Lion',
scientificName: 'Panthero leo',
size: 140,
diet: ['meat'],
},
{
name: 'Gorilla',
scientificName: 'Gorilla beringei',
size: 205,
diet: ['plants', 'insects'],
additional: {
notes: 'This is the eastern gorilla. There is also a western gorilla that is a different species.'
}
},
{
name: 'Zebra',
scientificName: 'Equus quagga',
size: 322,
diet: ['plants'],
additional: {
notes: 'There are three different species of zebra.',
link: 'https://en.wikipedia.org/wiki/Zebra'
}
}
]
Then I have created an EventCard.js file as follows
import React from 'react';
import './EventCard.css';
export default function EventCard(
additional,
diet,
name,
scientificName,
size
) {
return (
<div><h2>{name}</h2>
<h3>{scientificName}</h3>
<h4>{size}kg</h4>
{(<div>{diet}</div>)}
</div>)
}
The App.js file is as follows
function App() {
return (
<><Router>
<Navbar />
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
<Route path='/services' component={Services} />
<Route path='/contact-us' component={Contact} />
<Route path='/signin' component={Login} />
<Route path='/search/*' component={SearchResults} />
</Switch>
</Router><div className="wrapper">
<h1>Events</h1>
{data.map((event) => (
<EventCard
additional={event.additional}
diet={event.diet}
key={event.name}
name={event.name}
scientificName={event.scientificName}
size={event.size}/>
))}
</div></>
);
}
export default App;
Please let point out where I am going wrong Thanks!
Data passed into a component as component properties will always be as keys/values pairs in a object, so you need to decide how to recover them.
So the props aren't single arguments to the component which is how you're currently treating them, they somehow need to be accessed from that object. You can access them directly (props.name), or you destructure the data from the object which is how the example below works.
(Note: I've used a list to separate out the elements of the diet array here too.)
const data=[{name:"Lion",scientificName:"Panthero leo",size:140,diet:["meat"]},{name:"Gorilla",scientificName:"Gorilla beringei",size:205,diet:["plants","insects"],additional:{notes:"This is the eastern gorilla. There is also a western gorilla that is a different species."}},{name:"Zebra",scientificName:"Equus quagga",size:322,diet:["plants"],additional:{notes:"There are three different species of zebra.",link:"https://en.wikipedia.org/wiki/Zebra"}}];
function EventCard(props) {
const {
name,
scientificName,
size,
diet
} = props;
return (
<div>
<h2>{name}</h2>
<h3>{scientificName}</h3>
<h4>{size}kg</h4>
<ul>
{diet.map(item => <li>{item}</li>)}
</ul>
</div>
);
}
function Example({ data }) {
return (
<div>
{data.map(props => {
return <EventCard {...props} />
})}
</div>
);
};
ReactDOM.render(
<Example data={data} />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>it should be
export default function EventCard({
additional,
diet,
name,
scientificName,
size
})
and diet is an array when it shouldn't be, stringify that array or map it to a string