tengo un componente que se llama roles donde solo muestra por consola, el fetch de roles de la BBdDD, en el otro componente card, que muestra las cartas, en este caso en la carta roles, quiero que cuando pulse en el link roles, se me muestre por consola la informacion que tengo en la BBDD.
Aqui tengo el componente roles
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import { useEffect, useState } from "react";
import axios from 'axios';
const baseURL = "http://localhost/repositorio/Clinica-Veterinaria/backend/crud/api/leerRoles.php";
const Roles = () => {
const [roles, setRol] = useState([]);
//FORMA CON AXIOS
useEffect(() => {
axios
.get(`${baseURL}`)
.then((response) => {
setRol(response.data.cita);
})
.catch(err => { console.log(err.message) });
}, []);
console.log(roles)
return (
<div className="container w-100 mx-auto">
<div className="tituloGestion">
<p className="h2 text-center">Panel de gestión </p>
</div>
<div className="listaCartasGestion mt-5 w-100">
<div className="listaCartas text-center">
</div>
</div>
</div>
)
}
export default Roles;
Aqui tengo el componente card, como podeis ver he intentado hacer que me linkee, pero la pagina me sale en blanco
import React from 'react';
import { NavLink } from 'react-router-dom';
import { useEffect, useState } from "react";
import axios from 'axios';
import Roles from './Roles';
const baseURL = "../cartas.json";
const Card = () => {
const [carta, setCarta] = useState([])
// ///FORMA CON FETCH
// useEffect(() => {
// fetch('../cartas.json')
// .then(response => {
// return response.json();
// })
// .then(data => {
// //console.log(data.cita)
// setCarta(data.cita);
// })
// .catch((err) => {
// console.log(err.message)
// });
// }, []);
//FORMA CON AXIOS
useEffect(() => {
axios
.get(`${baseURL}`)
.then((response) => {
setCarta(response.data.cita);
})
.catch(err => { console.log(err.message) });
}, []);
const renderCard = (card, index) => {
if (carta.length) {
return (
// Array.from(carta).forEach((card) => {
// return (
// console.log(card)
<div className="card col-1 col-md-3 w-15 mx-auto" key={index} >
<img
src={card.imagen}
alt={card.nombre}
className="card-img py-3 px-3 mx-auto"
style={{ width: "12rem" }}
/>
<div className="card-body">
<p className="card-title">{card.descripcion}</p>
</div>
<div className="card-footer fs-3 py-3 px-3">
{/* <Link to="Roles">Roles</Link> */}
<NavLink to={card.link}>Roles</NavLink>
{/* <BrowserRouter>
<Routes>
<Route path={card.link} element={card.nombre}>
</Route>
</Routes>
</BrowserRouter> */}
</div>
)
}
// )
// }
}
return <div className='app row row-cols-12 gap-5 justify-content-md-center'>{carta.map(renderCard)}</div>
}
export default Card;
Aqui les muestro el resultado del componente card, cuando pulso sobre el link de la carta roles
Este al acceder me sale vacio