CODEWITHSUNDEEP
reactjsreact-props
hannit cohen
hannit cohen

Reputation: 350

How to pass an array of objects as a prop in react?

I'm trying to pass an array of objects to a function on react, I'm getting an error of Uncaught TypeError: props.map is not a function although when I print the props, namely users, to the log before passing it on, it is an array

I have the following data:

{
"name": "My test name",
"users": [
    {
        "name": "user 1 name",
        "data": [
            {
                "var1": [],
                "var2": {
                    "sub1": "open",
                    "sub2": ""
                },
            },
            {
                "var1": [],
                "var2": {
                    "sub1": "close",
                    "sub2": ""
                },
            },
        ]
    }
]}

The data is received by a REST API call. I'm trying to process it using the following react code:

interface SingleUser {
  var1: string[];
  var2: {
    sub1: string;
    sub2: string;
  }
  
}
interface Users {
    name: string;
    users:SingleUser[];
}

render() {
const { name, users} = this.state;
return (
  <div className='flow d-flex flex-row flex-wrap justify-content-start'>
    <GenInfo name={name} />
    <MyTabs {...users}/>
  </div>
);}



function MyTabs(props: Users[]) {
  const data = props
  const tabs = props.map((item) => {
    return {
      tabId: item.name.replace(/ /g,"_"),
      label: item.name,
      content: <TestTable {...item.users} />
    }
  });
  return <HorizontalTabs tabs={tabs} pills />
}

Upvotes: 0

Views: 134

Answers (1)

Anhdevit
Anhdevit

Reputation: 2104

You can define props ò MyTabs as data like this

render() {
const { name, users} = this.state;
return (
  <div className='flow d-flex flex-row flex-wrap justify-content-start'>
    <GenInfo name={name} />
    <MyTabs data={users}/>
  </div>
);}

function MyTabs({data: Users[]}) {
  const tabs = data.map((item) => {
    return {
      tabId: item.name.replace(/ /g,"_"),
      label: item.name,
      content: <TestTable {...item.users} />
    }
  });
  return <HorizontalTabs tabs={tabs} pills />
}

Upvotes: 1

Related Questions