For a loop in reaction
This function works for me to get some activity 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>
)
})
}
that's ok, just passing it in, some "day and hour" will return the correct classes. But then I can't find a way to loop over this function ... and only can I 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 ... 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 steer me on the right track with "for" or "forEach", or hopefully! I've 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 am doing something wrong. Thanks in advance.
source to share
The reason is because a loop is used to iterate over an array, it will never return anything, if you want to return something 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: the horas array is constant, so I suggest you define it outside of the class.
source to share