javascript - don't know why im getting error while passing array of objects as props to child component in react js - TagMerge
1don't know why im getting error while passing array of objects as props to child component in react jsdon't know why im getting error while passing array of objects as props to child component in react js

don't know why im getting error while passing array of objects as props to child component in react js

Asked 1 years ago
0
1 answers

Short Answer - The error message you are getting is absolutely correct. If you read the React Docs, Your JSX compiles to React.createElement(component, props, ...children). And yes objects cannot be children. Ref - https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx

Since I don't have your sample data, I am assuming your data might be like this:

<Test arr={[{ a: 1 }, { b: 2 }, { c: 3 }]} />

I am creating a small component to render this data:

import React from "react"

function Test(props) {
  return (
    <div>
      {props.arr.map((x, index) => {
        console.log(index, x);
        // return <h1 key={index}>{x}</h1>;
        return <h1 key={index}>{Object.keys(x).map((y) => x[y])}</h1>;
      })}
    </div>
  );
}

If I place object in JSX, it will throw an error (Commented Code). Also please check the Table component (if its 3rd party lib), in which format it is expecting the data. If it's yours then you have to iterate over object using Object.entries() or Object.keys(), Object.values() to display data

Hope this answers your question. Please upvote if you find it helpful.

Source: link

Recent Questions on javascript

    Programming Languages