Hey there, I'm currently working on dynamically building the footer of Netflix using Reactjs and styled components. However, I seem to be stuck and could use some assistance. Any guidance would be greatly appreciated :)
I have already created the links in a links.json file
[
{
"id": 1,
"link": "FAQ"
},
{
"id": 2,
"link": "Investor Relations"
},
{
"id": 3,
"link": "Privacy"
},
{
"id": 4,
"link": "Speed Test"
},
{
"id": 5,
"link": "Help Center"
},
{
"id": 6,
"link": "Jobs"
},
{
"id": 7,
"link": "Cookie Preferences"
},
{
"id": 8,
"link": "Legal Notices"
},
{
"id": 9,
"link": "Account"
},
{
"id": 10,
"link": "Ways to Watch"
},
{
"id": 11,
"link": "Coorporate Information"
},
{
"id": 12,
"link": "Only on Netflix"
},
{
"id": 13,
"link": "Media Center"
},
{
"id": 14,
"link": "Terms of use"
},
{
"id": 15,
"link": "Contact US"
}
]
My struggle is with implementing the desired layout for the footer component. Despite trying the filter and map functions, I've been unsuccessful so far. The current result only displays 4 items per column within a ul tag. Any suggestions or solutions are welcome!
import React from 'react'
import linksData from '../fixtures/links'
import './Footer.css'
function Footer() {
return (
// <div>
// {linksData
// .filter()
// .map((item, index)=>(
// <li key={index}>{item.link}</li>
// )
// )}
// </div>
<div className="site-footer-wrapper">
<div className="site-footer">
<p className="footer-top">
<a className='footer-top-a' href> Questions? Contact US</a>
</p>
<ul className='footer-links'>
<li className='footer-link-item'>FAQ</li>
<li className='footer-link-item'>Investor Relations</li>
<li className='footer-link-item'>Privacy</li>
<li className='footer-link-item'>Speed Test</li>
</ul>
<ul className='footer-links'>
<li className='footer-link-item'>FAQ</li>
<li className='footer-link-item'>Investor Relations</li>
<li className='footer-link-item'>Privacy</li>
<li className='footer-link-item'>Speed Test</li>
</ul>
<ul className='footer-links'>
<li className='footer-link-item'>FAQ</li>
<li className='footer-link-item'>Investor Relations</li>
<li className='footer-link-item'>Privacy</li>
<li className='footer-link-item'>Speed Test</li>
</ul>
</div>
</div>
)
}
export default Footer
If you have any insights on how to achieve this goal, whether through adjustments in the code logic or CSS styling, your assistance will be highly valued. Thank you!