Cree el pie de página de Netflix dinámicamente con Reactjs

Estoy tratando de construir el pie de página de Netflix dinámicamente con Reactjs y componentes con estilo, pero no pude encontrar la manera de hacerlo. Cualquier ayuda sería apreciada :)

Creé los enlaces en un archivo links.json

[
  {
    "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"
  }
]

Luego, en mi componente de pie de página, intenté realizar las funciones de filtro y mapa, pero no puedo implementar el código: solo muestra 4 elementos por columna dentro de una etiqueta ul :(((

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

Agradecería cualquier ayuda sobre cómo hacer esto, ya sea con la función map() o con las reglas CSS. Gracias

Answer

Una cosa que podría ser beneficiosa es separar las preocupaciones. Cree un componente separado que manejará una columna a la vez.

En mi caso, creé un componente Column que devuelve una etiqueta JSX 'ul' y muestra etiquetas JSX 'li' basadas en la matriz linksToDisplay recibida como accesorios.

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

Luego, uso mi componente Columna dentro de mi componente Pie de página para mostrar las columnas según un criterio establecido.

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>
  );
};

Después de eso, aplique un poco de estilo a sus elementos y, en mi caso, estoy usando tailwindCSS y debería tener sus columnas mostrando los enlaces.

Producción: ingrese la descripción de la imagen aquí

Para referencia:

Array.prototype.slice()