for loop in react

Question

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.

No, it's working, but I think is not the best practice so I'm asking to know to do it in the right way. — Adolfo Onrubia
– Adolfo Onrubia, Commented May 18, 2017 at 20:47
Sure, ` render() { console.log('DATA: ', data) 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>{this.filtrarClases(i, horas[i])</ul> } `** "UPDATING QUESTION...** — Adolfo Onrubia
– Adolfo Onrubia, Commented May 18, 2017 at 20:48
@AdolfoOnrubia basically you want to iterate the horas array and create that <div><ul>.....</ul></div> dynamically instead of writing all those again and again correct ? — Mayank Shukla
– Mayank Shukla, Commented May 18, 2017 at 20:52

Mayank Shukla · Accepted Answer · 2017-05-18 21:33:16Z

5

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.

edited May 18, 2017 at 21:33

answered May 18, 2017 at 21:18

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

for loop in react

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related