Grow: JSX-heavy component

[npereznyc]

Our ExtendedCast component, which renders the 7-Day Forecast page is very JSX-heavy and in the future, we would want to refactor it so that each day’s forecast is in a separate component.

if(weatherData && weatherData.daily){
        return (
            <div className="ExtendedCast">
                <h1 className="ForecastTitle">7 Day Forecast</h1>
                <div className="Cast0"> 
                    <h3>{weatherData.daily.time[0]}</h3>
                    <h4>{weatherCodeHashmap.get(weatherData.daily.weathercode[0])}</h4>
                    <h4>High: {weatherData.daily.temperature_2m_max[0]}°F  <br/>Low: {weatherData.daily.temperature_2m_min[0]}°F</h4>
                    <h4>🌅 Sunrise:<br /> {weatherData.daily.sunrise[0]}</h4>
                    <h4>🌇 Sunset: <br /> {weatherData.daily.sunset[0]}</h4>
                    <h4>🍃 Wind: <br /> {windHashmap.get(weatherData.daily.winddirection_10m_dominant[0])} at {weatherData.daily.windspeed_10m_max[0]}mph</h4>
                </div>
                <div className="Cast1">
                    <h3>{weatherData.daily.time[1]}</h3>
                    <h4>{weatherCodeHashmap.get(weatherData.daily.weathercode[1])}</h4>
                    <h4>High: {weatherData.daily.temperature_2m_max[1]}°F <br/>Low: {weatherData.daily.temperature_2m_min[1]}°F</h4>
                    <h4>🌅 Sunrise:<br />  {weatherData.daily.sunrise[1]}</h4>
                    <h4>🌇 Sunset: <br /> {weatherData.daily.sunset[1]}</h4>
                    <h4>🍃 Wind: <br /> {windHashmap.get(weatherData.daily.winddirection_10m_dominant[1])} at {weatherData.daily.windspeed_10m_max[1]}mph</h4>
                </div>
                <div className="Cast2">
                    <h3>{weatherData.daily.time[2]}</h3>
                    <h4>{weatherCodeHashmap.get(weatherData.daily.weathercode[2])}</h4>
                    <h4>High: {weatherData.daily.temperature_2m_max[2]}°F  <br/>Low: {weatherData.daily.temperature_2m_min[2]}°F</h4>
                    <h4>🌅 Sunrise:<br /> {weatherData.daily.sunrise[2]}</h4>
                    <h4>🌇 Sunset: <br /> {weatherData.daily.sunset[2]}</h4>
                    <h4>🍃 Wind: <br /> {windHashmap.get(weatherData.daily.winddirection_10m_dominant[2])} at {weatherData.daily.windspeed_10m_max[2]}mph</h4>
                </div>
                <div className="Cast3">
                    <h3>{weatherData.daily.time[3]}</h3>
                    <h4>{weatherCodeHashmap.get(weatherData.daily.weathercode[3])}</h4>
                    <h4>High: {weatherData.daily.temperature_2m_max[3]}°F  <br/>Low: {weatherData.daily.temperature_2m_min[3]}°F</h4>
                    <h4>🌅 Sunrise:<br /> {weatherData.daily.sunrise[3]}</h4>
                    <h4>🌇 Sunset: <br /> {weatherData.daily.sunset[3]}</h4>
                    <h4>🍃 Wind: <br /> {windHashmap.get(weatherData.daily.winddirection_10m_dominant[3])} at {weatherData.daily.windspeed_10m_max[3]}mph</h4>
                </div>
                <div className="Cast4">
                    <h3>{weatherData.daily.time[4]}</h3>
                    <h4>{weatherCodeHashmap.get(weatherData.daily.weathercode[4])}</h4>
                    <h4>High: {weatherData.daily.temperature_2m_max[4]}°F  <br/>Low: {weatherData.daily.temperature_2m_min[4]}°F</h4>
                    <h4>🌅 Sunrise:<br /> {weatherData.daily.sunrise[4]}</h4>
                    <h4>🌇 Sunset: <br /> {weatherData.daily.sunset[4]}</h4>
                    <h4>🍃 Wind: <br /> {windHashmap.get(weatherData.daily.winddirection_10m_dominant[4])} at {weatherData.daily.windspeed_10m_max[4]}mph</h4>
                </div>
                <div className="Cast5">
                    <h3>{weatherData.daily.time[5]}</h3>
                    <h4>{weatherCodeHashmap.get(weatherData.daily.weathercode[5])}</h4>
                    <h4>High: {weatherData.daily.temperature_2m_max[5]}°F  <br/>Low: {weatherData.daily.temperature_2m_min[5]}°F</h4>
                    <h4>🌅 Sunrise:<br /> {weatherData.daily.sunrise[5]}</h4>
                    <h4>🌇 Sunset: <br /> {weatherData.daily.sunset[5]}</h4>
                    <h4>🍃 Wind: <br /> {windHashmap.get(weatherData.daily.winddirection_10m_dominant[5])} at {weatherData.daily.windspeed_10m_max[5]}mph</h4>
                </div>
                <div className="Cast6">
                <h3>{weatherData.daily.time[6]}</h3>
                    <h4>{weatherCodeHashmap.get(weatherData.daily.weathercode[6])}</h4>
                    <h4>High: {weatherData.daily.temperature_2m_max[6]}°F  <br/>Low: {weatherData.daily.temperature_2m_min[6]}°F</h4>
                    <h4>🌅 Sunrise:<br /> {weatherData.daily.sunrise[6]}</h4>
                    <h4>🌇 Sunset: <br /> {weatherData.daily.sunset[6]}</h4>
                    <h4>🍃 Wind: <br /> {windHashmap.get(weatherData.daily.winddirection_10m_dominant[5])} at {weatherData.daily.windspeed_10m_max[5]}mph</h4>
                </div>
                <Link to={`/`}>
                    <button className="HomepageButton">Return to Homepage</button>
                </Link>
            </div>

[Rancor38]

It does seem a little chonky, but that you can identify that, and conceptualise a solution is in and itself a very good sign you're thinking like developers!