Есть 2 компонента в компоненте родителе определяется массив данных и передаётся в дочерний компонент, дочерний компонент не отрисовывает полученные от родителя props.
Компонент родитель:
const MyComponent = () => {
const data = [
{
mens: [
{
category: "casuals",
subcategories: ["Jackets", "Hoodies & Sweatshirts", "Polo Shirts", "Sportswear", "Trousers & Chinos", "T-Shirts"]
},
{
category: "FORMAL",
subcategories: ["Jackets", "Shirts", "Suits", "Trousers"]
}
]
},
{
womens: [
{
category: "casuals",
subcategories: ["Jackets", "Hoodies & Sweatshirts", "Polo Shirts", "Sportswear", "Trousers & Chinos", "T-Shirts"]
},
{
category: "FORMAL",
subcategories: ["Jackets", "Shirts", "Suits", "Trousers"]
}
]
}
];
const [mens, womens] = [...data];
return (
<div>
<Categories data={mens}/>
<Categories data={womens}/>
</div>
)
}
export default MyComponent
Дочерний компонент
const Categories = (props) => {
const [columnArr, setColumnArr] = useState([]);
useEffect(()=>{
propsToArr();
},[]);
const propsToArr = () => {
const {data} = props;
const arr = [];
for (let key in data) {
for (let jKey in data[key])
arr.push(data[key][jKey])
}
setColumnArr([...arr]);
};
const renderLi = (item, key) => {
return (
<li className='categories__item' key={key}><Link to='/'>{item}</Link></li>
)
};
const renderColumn = () => {
columnArr.map((item, iKey) => {
return (
<div className='categories__column' key={iKey}>
<div><label>{item.category}</label></div>
<ul className='categories__list'>
{item.subcategories.map((item, jKey) => {
renderLi(item, jKey)
})}
</ul>
</div>
)
})
};
return (
<div className='categories'>
<div className='categories__grid'>
{
renderColumn()
}
</div>
</div>
)
};
export default Categories;