Hello i've array data like below and there is have complicated issue for me.
{data.menu.map((data2, i) => {
menutitle:{data2.title}
})}
i need apply something like above to inside of "MasterBanner" but i dont know how can i do this.Someone Can help me ?
import MasterBanner from "./MasterBanner";
const Data = [
{
bgcolorcode: "#482624",
title: "",
desc: "",
link: "",
menu:[{
title:"Tshirt",
img:"/images/home-banner/1.jpg"
},
title:"Tshirt",
img:"/images/home-banner/1.jpg"
}],
},
{
bgcolorcode: "#858489",
title: "",
desc: "",
link: "",
menu:[{
title:"Tshirt",
img:"/images/home-banner/1.jpg"
},
{
title:"Tshirt",
img:"/images/home-banner/1.jpg"
}],
}
];
{Data.map((data, index) => {
return (
<MasterBanner
key={index}
desc={data.desc}
title={data.title}
link={data.link}
img={data.img}
bgcolorcode={data.bgcolorcode}
/I need to place nested array data(menu) to here/
/>
)
})}
EDITED:
Import Link from "next/link";
import { Col, Container, Row } from "reactstrap";
const MasterBanner = ({ img, menuimg, menutitle, title, desc, link, classes, btn, btnClass, bgcolorcode }) => {
return (
html codes --its not ready--
);
};
export default MasterBanner;
export default function MasterBanner(props) {
const { data } = props
return (
{data.map(d) => (
<div>{d.title}</div>
...
)}
)
}