Fahrenheit toggle button

src/App.js

@@ -12,6 +12,7 @@ function App() {
   const [search, setSearch] = useState('');
   const [location, setLocation] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [unit, setUnit] = useState('celsius');
 
   function handleSearch(e) {
     setSearch(e.target.value);
@@ -53,7 +54,7 @@ function App() {
   }, [location, search, fetchData]);
 
   let display = data ? (
-    <Weather place={place} data={data} />
+    <Weather place={place} data={data} unit={unit} />
   ) : (
     <p>no data found 😬</p>
   );
@@ -75,6 +76,9 @@ function App() {
         </div>
         <div>
           <button onClick={geoHandler}>Find me!</button>
+          <button onClick={() => setUnit(unit === 'celsius' ? 'fahrenheit' : 'celsius')}>
+            {unit === 'celsius' ? 'Fahrenheit' : 'Celsius'} 
+          </button>
         </div>
         <br />
         <br />

src/components/Weather.js

@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import './Weather.css';
 
 const Weather = (props) => {
@@ -8,7 +9,8 @@ const Weather = (props) => {
       </div>
       <img src={props.data.condition.icon} alt="" />
       <div className="sky-status">{props.data.condition.text}</div>
-      <div className="temp">Temperature : {props.data.temp_c}°C</div>
+      <div className="temp">
+          Temperature: {props.unit === 'celsius' ? props.data.temp_c : props.data.temp_f}° {props.unit === 'celsius' ? 'C' : 'F'}</div>
       <div className="humidity">Humidity : {props.data.humidity}</div>
     </div>
   );