Challenge: Weather card

Write a component that takes a city name prop and shows temperature and condition.

Challenge: Weather card

This challenge asks you to write a WeatherCard component. It should take three props: city, temp, and condition. If it's very cold (temp < 0), the card background is blue; otherwise orange.

Set the className with a ternary: temp < 0 ? "cold" : "warm". Show <h2>{ '{ city }' }</h2>, <p>{ '{ temp }' }°C</p>, and <p>{ '{ condition }' }</p>.

Time to combine props destructuring and conditional rendering. Few hints; apply what you learned.

Exercise Write WeatherCard

Complete the skeleton. Write a WeatherCard component. Take ({ '{ city, temp, condition }' }) as parameter. Create the root div with <div className={ '{ temp < 0 ? "cold" : "warm" }' }>. Inside, have <h2>{ '{ city }' }</h2>, <p>{ '{ temp }' }°C</p>, and <p>{ '{ condition }' }</p>. Export it.

Show example solution

function WeatherCard({ city, temp, condition }) {
  return (
    <div className={temp < 0 ? "cold" : "warm"}>
      <h2>{city}</h2>
      <p>{temp}°C</p>
      <p>{condition}</p>
    </div>
  );
}

export default WeatherCard;

Test yourself

If temp is below 0, which class?
- hot
- warm
- cold
- cool
Show answer

cold — temp < 0 picks the "cold" class.
Match the weather parts

city

City
temp

Temperature
condition

Condition
cold

Low temp

Next lesson: Challenge: Cart summary

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies