I got this function working to get some gym classes from a .json file.
filtrarClase(dia, hora) {
let data = this.state.data
return data.filter(clase => {
if ((clase.dia === dia) && (clase.horaclase === hora)) {
return clase.actividad
} else {
return false
}
})
.map((clase,i) => {
return (
<li key={i} className={clase.estilo}>{clase.actividad}
<p className="duracion">{clase.duracion}</p>
<p className="sala">{clase.hoy} {clase.sala}</p>
</li>
)
})
}
it's ok, just passing it some "day and hour" will return right classes. But then I can't find a way to loop over this function... and only be able to do this ****
<div className="horario-container">
<ul className="horario-hora">{horas[0]}</ul>
<ul className="horario-item">{this.filtrarClase(1, horas[0])}</ul>
<ul className="horario-item">{this.filtrarClase(2, horas[0])}</ul>
<ul className="horario-item">{this.filtrarClase(3, horas[0])}</ul>
<ul className="horario-item">{this.filtrarClase(4, horas[0])}</ul>
<ul className="horario-item">{this.filtrarClase(5, horas[0])}</ul>
<ul className="horario-item">{this.filtrarClase(6, horas[0])}</ul>
</div>
Over and over again... 17 times..
<div className="horario-container">
<ul className="horario-hora">{horas[1]}</ul>
<ul className="horario-item">{this.filtrarClase(1, horas[16])}</ul>
<ul className="horario-item">{this.filtrarClase(2, horas[16])}</ul>
<ul className="horario-item">{this.filtrarClase(3, horas[16])}</ul>
<ul className="horario-item">{this.filtrarClase(4, horas[16])}</ul>
<ul className="horario-item">{this.filtrarClase(5, horas[16])}</ul>
<ul className="horario-item">{this.filtrarClase(6, horas[16])}</ul>
</div>
I'm sure you can point me on the right way with a "for" or "forEach", or hope so! I tried this:
actualizarLista(dia){
const horas = ['07:30','08:15','08:30','09:30','10:30','15:00','15:15','15:30','17:30','18:00','18:15','18:30','19:00','19:30','20:00','20:30','21:30']
for (let i=0; i<horas.length;i++){
return <ul className="horario-item">{this.filtrarClase(dia, horas[i])}</ul>
}
}
render() {
let dias = [1,2,3,4,5,6]
for (let i=0; i<dias.length;i++){
this.actualizarLista(i)
}
return (
<div className="App">
<div className="horario-container">
<div className="horario-list">{dias}</div> .........
I tried a for loop but only returns 1 item, so I'm doing something wrong for sure. Thanks in advance.
Reason is, for loop is used to iterate the array it will never return anything, if you want to return something then use map
.
Write it like this:
actualizarLista(dia){
const horas = ['07:30','08:15','08:30','09:30','10:30','15:00','15:15','15:30','17:30','18:00','18:15','18:30','19:00','19:30','20:00','20:30','21:30']
return horas.map((el, i) => {
return <ul className="horario-item">{this.filtrarClase(dia, el)}</ul>
})
}
render() {
let dias = [1,2,3,4,5,6];
let uiItems = dias.map(i => {
return <div className="horario-container" key={i}>
{this.actualizarLista(i)}
</div>
})
return (
<div className="App">
{uiItems}
</div>
)
}
Suggestion: horas array is constant so i will suggest you to define it once outside of the class.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With