Capitulo 36 del Módulo 8 Páginas públicas

➜ Página Categoría

Página Categoria | Diseño e implementación de la sección Categoría para mostrar los datos de dicha categoría además de las empresas relacionadas con la categoría.

Página Categoria

import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import Config from '../Config'
import Modal from '../components/Modal'

const Categoria = () => {

    const { slug} = useParams()
    const[modal, setModal] = useState(false)
    const[datamodal, setDatamodal] = useState([]) 
    const [categoria, setCategoria] = useState([])
    const [empresas, setEmpresas] = useState([])
    const navigate = useNavigate()

    useEffect(()=>{
      const getCategoria = async () =>{
        await Config.CategoriaBySlug(slug).then(({data})=>{
          if(data!==null){
            setCategoria(data.categoria)
            if(data.empresas.length > 0){
              setEmpresas(data.empresas)
            }
          }else{
            navigate("/")
          }
        })
      }
      getCategoria();
    },[slug])

    const showModal = (e,empresa)=>{
      e.preventDefault()
       setModal(true);
       setDatamodal(empresa);
    }

  return (
    <div className="container">
      <div className='row justify-content-center'>
        <div className="col-sm-8">
            <div className="card mt-5 mb-5">
              <div className="card-body">
                <h1 className='text-center fw-bolder'>Empresas de {categoria.nombre}</h1>
              </div>
            </div>

            {
              empresas.map((empresa)=>{
                return(
                  <div className='mt-3' key={empresa.id}>
                        <div className="card-body">
                          <h2 className='fw-bolder'>
                            <a href="#" onClick={(e)=>showModal(e,empresa)}>{empresa.nombre}</a>
                          </h2>
                          <p>{empresa.descripcion}</p>
                        </div>
                  </div>
                )
              })
            }
            {modal && <Modal datamodal= {datamodal} close={setModal}/>}


        </div>
      </div>
    </div>
  )
}

export default Categoria

 


1537 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

Core