retorno de bucle cambiar condicional anidada con JSX?

votos
0

Estoy usando una API de tiempo y logrado conseguir todo lo que quería. Sin embargo, la API viene con iconos aburrida y monótona que quiero reemplazado con mis propios iconos animados del tiempo. Decidí reemplazar los iconos del tiempo con los iconos del tiempo animados personalizados en su lugar. Sin embargo, estoy atascado en averiguar cómo devolver los iconos personalizados en mi declaración de retorno.

Aquí está mi código que tengo un montón de él, así que sólo voy a estar mostrando las secciones pertinentes.

                    const weatherData = async () => {
                        // Get forecast 5 days etc..
                        const weatherResponse1 = fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${data.city},${data.country_code}&appid=&units=imperial`)
                        
                        const [response1] = await Promise.all([weatherResponse1]);

                        const weatherJson1 = await response1.json();

                        let newForecast = []
                        let weathericonState = []

                        for (let i = 0; i < weatherJson1.list.length; i+=8){
                            switch (weatherJson1.list[i].weather[0].icon){
                                // clear night or few clouds day or night time or night mist
                                case '01n':
                                case '03n':
                                case '03d':
                                case '04n':
                                case '50n':
                                weathericonState = ( 
                                    <div class=icon cloudy>
                                        <div class=cloud></div>
                                        <div class=cloud></div>
                                    </div>
                                )
                                break;
                                // clear day time or day mist
                                case '01d':
                                case '50d':
                                weathericonState = (
                                    <div class=icon sunny>
                                        <div class=sun>
                                            <div class=rays></div>
                                        </div>
                                    </div>
                                )
                                break;   
                                // broken clouds day time
                                case '04d':
                                weathericonState = (
                                    <div class=icon sun-shower>
                                        <div class=cloud></div>
                                        <div class=cloud></div>
                                        <div class=sun>
                                            <div class=rays></div>
                                        </div>
                                    </div>
                                )
                                break;                                                     
                            }

                            newForecast.push(weatherJson1.list[i])
                        }
                    
                        this.setState({
                            weatherData: newForecast,
                        })
                    }

                    const weatherResults = weatherData();

                    weatherResults;

                }
            });
        }
    }

instrucción de retorno:

            return (
            <div className=container-fluid id=userfluidprofile>
                    <div className=row>
                        <div className=col-md-7>
                            {
                                this.state.weatherData.map((row, index) => 
                                    <div className=weatherContainer key={index}>
                                        // I want to replace this img with my custom animated icons returned from my nested looped conditional.
                                        <img src={'https://openweathermap.org/img/w/' + row.weather[0].icon + '.png'} alt=Weather Icon />
                                    </div>
                                )
                            }   
                        </div>
                </div>
            </div>
        )

Publicado el 23/07/2018 a las 09:38
fuente por usuario
En otros idiomas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more