Estoy tratando de crear una interfaz de usuario basada en tarjetas que tome datos del archivo data.js y complete la información en las tarjetas. He creado un archivo data.js con los siguientes datos.
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' } }]
Luego he creado un archivo EventCard.js de la siguiente manera
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>) }El archivo App.js es el siguiente
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;Por favor, señale dónde me estoy equivocando. ¡Gracias!
Los datos pasados a un componente como propiedades del componente siempre serán pares de claves/valores en un objeto, por lo que debe decidir cómo recuperarlos.
Por lo tanto, los accesorios no son argumentos únicos para el componente, que es como los está tratando actualmente, de alguna manera se debe acceder a ellos desde ese objeto. Puede acceder a ellos directamente ( props.name ), o puede desestructurar los datos del objeto, que es como funciona el siguiente ejemplo.
(Nota: aquí también he usado una lista para separar los elementos de la matriz de la dieta).
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>debería ser
export default function EventCard({ additional, diet, name, scientificName, size })y la dieta es una matriz cuando no debería serlo, encadene esa matriz o asigne una cadena