Estoy intentando mostrar unos tickets en la pantalla desde una APi. Hice la petición con un fetch y la consola me muestra un array con la data que quiero que se muestren en la pantalla.
Hasta ahí todo bien pero los datos del array no aparecen en la pantalla.
Edito el codigo fuente:
import React from 'react';
import { getAllTickets } from '../../lib/api';
class Tickets extends React.Component {
state = {
tickets: [],
clicked: false,
};
onclicked = () => {
this.setState({ clicked: true });
console.log('helloitsme');
};
componentDidMount = async () => {
try {
const { data } = await getAllTickets();
if (data) {
this.setState({ tickets: data.data });
}
} catch (err) {}
};
render() {
return (
<article>
<section className="container">
{this.state.tickets.map((ticket) => {
return (
<div onClick={this.onclicked} key={ticket.id}>
{this.state.clicked === true && (
<div className="boxinfo">
<h1 className="info">{ticket.fecha_adquisicion}</h1>
<h2 className="info">{ticket.id_comercio}</h2>
<h3 className="info">{ticket.precio_total}</h3>
</div>
)}
</div>
);
})}
</section>
</article>
);
}
}
export default Tickets;
Ese es el método render que hice. Estaba pensando en el undefined "REACT_APP_SERVER_URL:" que se muestra en la consola, podría ser que la función que hice en la API este mal? Gracias
fetch
como lo estas llamando y donde estas cambiando el estado, ¿Estas usando Redux? saludos.map()
te falta unreturn
deberia de ser asireturn <div onClick={this.onclicked} key={ticket.id}>
proba y avisanos si eso te funciona.