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

Question

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 />
}

Answer 1

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 />
}