I am very new to stack overflow and this is also my first post so I am not sure if this question is specific/detailed enough but...: I am trying to figure out how to replace the h2 element 'Unpack the Week' with the div between the comments. For now I am trying to avoid rendering a new component and simply just have a div hiding until the h2 element is clicked to view the information inside of that div (my project is all on one page/one path). I created a weekToggle function attached to the h2 but I dont think its the right direction of what I want.
enter code here
const weekToggle = () => {
console.log('clicked');
return (
<div>
<img src="" alt="" />
<h4>Monday</h4>
<img src="" alt="" />
<h4>75˚/65˚</h4>
</div>
)
}
return (
<div>
<div>
<img src={unpackedImg(cityConditions)} alt="" />
<div>
<img src={iconImg(cityConditions)} alt="" />
<h1>{cityName}</h1>
<h2>{cityTemp}</h2>
<div>
<div>
<h3>{cityConditions}</h3>
<p>Conditions</p>
</div>
<div>
<h3>{cityWind}mph</h3>
<p>Wind speed</p>
</div>
<div>
<h3>{cityHumidity}%</h3>
<p>Humidity</p>
</div>
</div>
</div>
</div>
<h1>{cityName} unpacked!</h1>
<div>
{/* after clicking h2 element 'Unpack the Week' replace h2 with this div */}
{/* ---------------------------------------------------------------------*/}
<h2 onClick={weekToggle}>Unpack the Week</h2>
<div>
<img src="" alt="" />
<h4>Monday</h4>
<img src="" alt="" />
<h4>75˚/65˚</h4>
</div>
{/* ---------------------------------------------------------------------*/}
</div>
</div>
)
}
Weather.propTypes = {
weather: PropTypes.object
}
I'm assuming you want to build collapsible element with details regarding temperatures for the whole week. The proper way to do it in React is using the hook useState which holds the information whether the details are visible or not. I re-designed your component a bit to show the idea.
import {useState} from "react";
function CityWeather ({cityName, cityTemp, cityConditions}) {
const [showDetails, setShowDetails] = useState(false);
return (
<div>
<h1>{cityName}</h1>
<h2>{cityTemp}
<span style={{cursor: 'pointer'}} onClick={() => setShowDetails(!showDetails)}>
{ showDetails ? <>▲</> : <>▼</> }
</span>
</h2>
{ showDetails &&
<div>
<div>
<h4>Monday</h4>
<h4>75˚/65˚</h4>
</div>
<div>
<h4>Tuesday</h4>
<h4>76˚/66˚</h4>
</div>
<div>
<h4>Wednesday</h4>
<h4>77˚/67˚</h4>
</div>
</div>
}
<div>
<div>
<h3>{cityConditions}</h3>
<p>Conditions</p>
</div>
</div>
</div>
)
}
use this component in your App like this:
<CityWeather cityName="London" cityTemp="75˚" cityConditions="fair"/>
Feel free to comment if you need any explanation.