➜ 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

1087 visitas

Capítulo 38 – Diseño con Bootstrap »

{ Curso ReactJS y Laravel Directorio de Empresas }

Compartir link con tus amigos

Descarga el código del proyecto

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

Comprar

➜ Página Categoría

Descarga el código del proyecto

¡Qué aprenderás?