Estoy tratando de hacer una llamada a la API y renderizar condicionalmente los datos en la página. Si cumple con ciertos criterios (fecha en este caso), quiero mostrarlo; de lo contrario, no quiero que aparezca en la página. Sin embargo, cuando escribo null , todavía obtengo 4 elementos que se registran como "nulos" en mi consola (solo quiero que aparezca el elemento "mostrar en la página"). He seguido este enfoque en proyectos anteriores y ha funcionado... ¿alguien sabe qué podría estar pasando aquí? Cualquier idea sería apreciada, ¡gracias!
useEffect(() => { axios({ method: "get", url: `http://dataservice.accuweather.com/forecasts/v1/daily/5day/${userInput}`, params: { apikey: "<API_key>", }, }) .then((response) => { setWeatherData( response.data.DailyForecasts.map((item) => { console.log( item.Date === "2022-05-31T07:00:00-04:00" ? "display to page" : null ); }) ); }) .catch((error) => { console.log(error); }); }, [userInput]);Al mapearlo en el jsx, hice esto:
<section className="wrapper weatherContainer"> {weatherData.map((data) => { console.log(data); return ( <div className="topContainer"> {/* if date matches today's date, display on top container, otherwise don't display anything */} { data.Date === "2022-05-31T07:00:00-04:00" ? ( <div className="topContainer"> <h1>Today</h1> <p> <img src={require(`../../assets/${data.Day.Icon}.png`)} alt={data.Day.IconPhrase} /> {toCelcius(data.Temperature.Maximum.Value).toFixed(0)}° </p> <p>{data.Day.IconPhrase}</p> </div> ) : null } </div> ); })} </section>Aparecen <div> vacíos porque la primera función de mapa dentro de las etiquetas <section> devuelve un <div className="topContainer"> incluso si el elemento no coincide. Devolver el artículo solo si coincide es el truco.
<section className="wrapper weatherContainer"> {weatherData.map((data) => { console.log(data); return ( data.Date === "2022-05-31T07:00:00-04:00" ? ( <div className="topContainer"> <h1>Today</h1> ... rest of the elements </div> ) : null ); })} </section>No estás iniciando sesión correctamente. Mire, en su operador ternario, dice si es true : registre "display to page" , de lo contrario, registre null . Para registrar sólo los elementos que son
item.Date === "2022-05-31T07:00:00-04:00"Tienes que hacerlo de esta manera
if(item.Date === "2022-05-31T07:00:00-04:00") console.log(item)