How to fix Objects are not valid as a React child (found: object with keys {}). If you meant to rend-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

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>