Capitulo 19 del Módulo 4 Rol Admin | User

➜ UserAll mostrar usuarios

Componente UserAll en React JS | Implementación del componente para mostrar todos los usuarios con el rol client que se han registrado en el directorio de empresas

CRUD UserAll()

App.jsx

<Route path='user' element={<UserAll/>} />

 

Config.jsx

// ROL ADMIN
    getUserAll:()=>axios.get(`${base_api_url}/admin/user`),

 

pageadmin/UserAll.jsx

import React, { useEffect, useState } from 'react'
import Sidebar from './Sidebar'
import Config from '../Config'
import { Link } from 'react-router-dom'

const UserAll = () => {

    const [users, setUsers] = useState([])

    useEffect(()=>{
        getUserAll();
    },[]);

    const getUserAll = async ()=>{
        const response = await Config.getUserAll()        
        setUsers(response.data)
    }


  return (
    <div className="container bg-light">
        <div className='row'>
        <Sidebar/>
        <div className="col-sm-9 mt-3 mb-3">
            <div className="card">
                <div className="card-body">
                    <table className='table'>
                        <thead>
                            <tr>
                            <th>ID</th><th>NAME</th><th>ACCIÓN</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                !users ? "...loading " : users.map(
                                    (user)=>{
                                        return(
                                            <tr key={user.id}>
                                                <td>{user.id}</td>
                                                <td>{user.name}</td>
                                                <td>
                                                    <Link to={`/admin/user/edit/${user.id}`} className='btn btn-primary'>Editar</Link>
                                                </td>
                                            </tr>
                                            
                                        )
                                    }
                                )
                            }                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
  )
}

export default UserAll

 


1549 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