0

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

introducir la descripción de la imagen aquí

Este al acceder me sale vacio

introducir la descripción de la imagen aquí

1 respuesta 1

0

aqui hay un ejemplo de como hacerlo

import { useEffect, useState } from "react";
const Cart = ()=>{
     const [carta, setCarta] = useState([])
     useEffect(function(){
        setCarta([
            {
                imagen:"iamgen 2",
                nombre:"nombre 2",
                link:"link 2"
            },
            {
                imagen:"iamgen",
                nombre:"nombre",
                link:"link"
            },
        ])
     }
     ,[])
    const renderCart = (card)=>{
            return <>
            <div>{card.imagen}</div>
            <div>{card.link}</div>
            <div>{card.nombre}</div>
        </>
    }
    
    return <div>{ carta.length ? carta.map(renderCart) : "papas" }</div>
}
export default Cart

la expresión { carta.length ? carta.map(renderCart) : "papas" } es una condición para saber que mostrar en pantalla si es que el array carta no tiene nada

import { useEffect, useState } from "react";
const Cart = ()=>{
     const [carta, setCarta] = useState([])
     useEffect(function(){
        setCarta([
            // {
            //     imagen:"iamgen 2",
            //     nombre:"nombre 2",
            //     link:"link 2"
            // },
            // {
            //     imagen:"iamgen",
            //     nombre:"nombre",
            //     link:"link"
            // },
        ])
     }
     ,[])
    const renderCart = (card)=>{
            return <>
            <div>{card.imagen}</div>
            <div>{card.link}</div>
            <div>{card.nombre}</div>
        </>
    }
    
    return <div>{ carta.length ? carta.map(renderCart) : "papas" }</div>
}
export default Cart

lo que tienes que hacer es llamar a fetch o axios dentro de useEffect y llenar el useState con lo que tenga la api

1
  • No me vincula con la pagina, <a href={card.link}>{card.nombre}</a>, porque tiene que ser una ruta relativa Commented el 3 ene. 2023 a las 9:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.