How to set json data to footer list react - reactjs

Question

I start working with react and i need to set mock json data to list in footer.
How i can set list dynamically to each module. I have 3 modules Company, Catalog, Contacts, and JSON:
const FOOTER_DATA = {
menu: {
title: "Company",
items: [
{
title: "Link 1",
link: "#",
},
{
title: "Link 2",
link: "#",
}
],
},
catalog: {
title: "Catalog",
items: [
{
title: "Link Link 1",
link: "#",
},
{
title: "LinkLink 2",
link: "#",
},
{
title: "LinkLink 3",
link: "#",
},
{
title: "LinkLink 4",
link: "#",
},
{
title: "LinkLink 5",
link: "#",
},
{
title: "LinkLink 6",
link: "#",
}
],
},
contact: {
email: "some-mail#gmail.com",
tel: "777 777 777",
work_time: {
weekdays: "09:00 - 18:00",
weekends: "10:00 - 16:00",
},
},
};
How i can set this for each jsx file, to special tags:
<Company />
<Categories />
<Contacts />
I am really beginner in react an i stuck in such issues.

Answer 1

You should pass the data as a prop to each element and render the data inside each component.
<Company data={FOOTER_DATA?.menu}/>
<Categories data={FOOTER_DATA?.catalog}/>
<Contacts data={FOOTER_DATA?.contact}/>
For example you may have a JSX component for Company like below,
import React from "react";
const Company = ({ data }) => {
return (
<React.Fragment>
<h2>{data.title}</h2>
{data.items.map((item, index) => (
<a key={index} href={item.link}>
{item.title}
</a>
))}
</React.Fragment>
);
};
export default Company;