➜ Página Categorías

Página Categorias | Diseño e implementación de la sección categorias donde mostraremos todas las categorías creadas por el rol admin

Página Categorias

import React, { useEffect, useState } from 'react'
import Config from '../Config';

const Categorias = () => {
  const [categorias, setCategorias] = useState([]);
  useEffect((e)=>{
    getCategorias();
  },[])

  const getCategorias = async()=>{
    const response = await Config.CategoriaAll()    
    //console.log(response)
    setCategorias(response.data);
  }

  return (
    <div className="container pt-5 pb-5">
        <div className="row justify-content-center">
          <div className="col-sm-8">
            <h1 className='text-center fw-bolder'>CATEGORIAS</h1>
              <div className="row">
              {
              categorias.map((categoria) =>{
                return(
                 <div className="col-sm-4" key={categoria.id}>
                   <div className="card">
                    <div className="card-body">
                    <img src={`/img/categoria/`+categoria.urlfoto} className='mx-auto d-block img-fluid' />

                    </div>
                    <div className="card-footer">
                      <a href={`/categorias/${categoria.slug}`} className='btn btn-primary w-100'>{categoria.nombre}</a>
                    </div>
                  </div>
                 </div>
                )
              })
              }
              </div>
            
          </div>
        </div>
    </div>      
  )
}

export default Categorias

844 visitas

Capítulo 36 – Página Categoría »

{ 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ías

Descarga el código del proyecto

¡Qué aprenderás?