I have created an array of cards that is rendered as I wanted, the problem I have is that although the rest of the components are also rendered and displayed in the console and in the page structure, they appear lower down and it does not let me scroll down them, I have tried to use ScrollView
but seeing how it works I have understood that it does not work for what I want to do.
attached code
import React from 'react';
import axios from 'axios';
import './Home.css';
// Estructura de los datos en React
export default class FetchEquipo extends React.Component {
state = {
loading: true,
equipos: []
};
// Inicio de la petición asincrona a la API
async componentDidMount() {
const url = "http://localhost:8000/api/Equipos/?format=json";
// Await de la función para esperar a la respuesta asincrona y obtener los datos
const response = await axios.get(url);
const data = await response.data;
// Cambio del estado de los datos porque llegado aquí ya se han recibido
this.setState({ equipos: data, loading: false });
}
render() {
// Mostrará un escenario dependiendo de si estan o no cargados los datos
if (this.state.loading === true) {
return (
<div>
<p>Loading...</p>
</div>
);
}
else if (!this.state.equipos.length === null) {
return (
<div>
<p>No se encontraron datos de los equipos</p>
</div>
);
}
else{
// Mapeo del array de equipos por cada uno de los equipos
const equiposJSx = [];
this.state.equipos.forEach(equipo => {
equiposJSx.push(
// Componente raíz del grupo al que se le pasa una key unica en este caso ek nombre del equipo
<div className='card-container' key={equipo.Equipo}>
<div className='image-container'>
<img src={equipo.Equipo}/>
</div>
<div className='card-content'>
<div className='card-title'>
<h3>{equipo.Equipo}</h3>
</div>
<div className='card-body'>
<p>Valor total: {equipo.ValorTotal}</p>
<p>Valor Medio: {equipo.ValorMedio}</p>
<p>Jugadores: {equipo.Jugadores}</p>
<p>Edad media: {equipo.EdadMedia}</p>
</div>
</div>
</div>
);
});
return (
<div className="row">
{equiposJSx}
</div>
);
}
}
}
As you can see in the image, no scrollbar or anything is shown, I have tried using flatlist
it but it does not suit what I want either, which is to be able to scroll down to be able to see the rest of the components
Edit 1 : In the css I have the overflow set to hidden
.card-container{
margin-left: 15%;
margin-top: 10%;
width: 300px;
overflow: hidden;
box-shadow: 0px 0px 15px -5px;
transition: 0.5s;
animation: ease-in;
background-color: aliceblue;
}
.card-container:hover{
transform: scale(1.1);
box-shadow: 0px 0px 15px 0px;
}
.image-container img{
overflow: hidden;
height: 200px;
}
.card-content{
margin: 1rem;
margin-top: 0.9rem;
}
h3, p{
margin: 0;
padding: 0;
}
.card-title{
margin-bottom: 0.5rem;
}
According to the overflow documentation :
Trying to emulate the case you have (without defining the property
height
):Note how the
scrollbar
containerdiv
does not work, instead with the propertyheight
defined, as the documentation specifies:In your case you would have to wrap your elements with the
div
one with theoverflow:scroll
and a height defined by means ofheight
.