Am trying to build the footer of Netflix dynamically with Reactjs and styled-components but i couldn't figure it out how to do it. please any help :)

I 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"
  }
]

Then in my footer component i tried to do the filter and map functions but i can't implement the code: only display 4 items per columns inside an ul tag :(((

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

please any help of how can i do it, either with map() function or with CSS rules. Thank you

CodePudding user response：

One thing that could be beneficial is separating the concerns. Create a separate component that will handle one column at a time.

In my case, I created a Column component that returns a 'ul' JSX tag and display 'li' JSX tags based on linksToDisplay array received as props.

const Column = ({ linksToDisplay, key }) => (
   <ul key={key} className='px-4'>
      {linksToDisplay.map((item) => (
         <li key={item.id}>{item.link}</li>
      ))}
   </ul>
);

Then, I use my Column component inside my Footer component to display the columns based on a set criteria.

const Footer = () => {
  return (
    <div className='container mx-auto flex px-2 lg:px-5 py-24 h-screen 
    items-center justify-center flex-row'>
       {links.map((link, index) => {
          // So you get a new column after 4 items have been displayed
          if (index % 4 === 0) {
            // Array.slice to get the next 4 links in the array
            const nextFourLinks = links.slice(index, index   4);
            return <Column key={link.id} linksToDisplay={nextFourLinks} 
             />;
          }
       })}
    </div>
  );
};

After that, apply some styling to your elements and in my case I am using

For reference:

Array.prototype.slice()