Almost 1 year ago I published an article about . fetching data from an API in React.js But in that article, I used the class component and life cycle methods. After which, I received requests to create an article by This inspired me to think of a simple project idea that is compatible with this article. using functional components along with React Hooks. Ultimately, it came to me that I should consider creating a web page that takes a city name as input and provides weather data about the city.  How peachy! I will use the online service as the API. Let’s discuss the project structure with a diagram. OpenWeatherMap In our webpage, we will have a form that takes city name as an input, and when we submit the form it sends a network request to the . OpenWeatherMap API resolves the request and as a response, it sends JSON data containing weather info about the city. After that, we will display the data on our webpage. Let’s take a look at the mock-up design for more clarification. OpenWeatherMap As we have the minimum info about what we are going to do and how it will look like, let’s start creating a react project. In your terminal execute .  I will call my project name . It will set up a default project for us. create-react-app <project name> react-hook-with-api As usual, I will use my favorite as my editor. Now it’s time to do some cleanup. Visual Studio Code Remove , , , rename App.js with App.jsx with the following code under components folder. Don’t forget to change the import of App in the index.js. App.css App.test.js index.css const App = () => {
  return(
    <div>Weather App</div>
  )
}

export default App; Execute in your terminal, which will open your browser and you should see Weather App on the page. yarn start I will use to make the designing easier. On your terminal execute if you are using yarn or with npm execute . In your index.js don’t forget to add . It is time to create our first component. bootstrap yarn add bootstrap npm i bootstrap import ‘bootstrap/dist/css/bootstrap.min.css‘ Create  SearchBar Component In our components folder create a file. Add the following lines of code in the file. And import the component in your App.jsx. On the webpage, you should see SearchBar. SearchBar.jsx // SearchBar.jsx
const SearchBar = ({ onSearchSubmit }) => {
  return (
    <div>
     SearchBar
    </div>
  );
}

export default SearchBar;

// App.jsx
import SearchBar from './SearchBar';

const App = () => {
  return(
    <div>
      <h3>Weather App</h3>
      <SearchBar />
    </div>
  )
}

export default App; Let’s add a form in our SearchBar component. Well, it’s . Because the priority is to utilize react hook. Replace your SearchBar.jsx with the following lines. going to be ugly //SearchBar.jsx
const SearchBar = () => {

  onFormSubmit = (event) => {
    event.preventDefault();
  }

  onInputChange = (event) => {
    console.log(event.target.value);
  }
  
  return (
    <div className="w-80 mt-20">
      <form className="w-100" onSubmit={onFormSubmit}>
        <div className="w-60 m-auto d-flex justify-content-center">
          <input 
            className="w-75"
            type="text"
            placeHolder="Enter city name"
            onChange={onInputChange}
          />
          <button type="submit" className="w-25">Search</button>
        </div>
      </form>
    </div>
  );
}

export default SearchBar; You should see the following output on your webpage. Add State In a article, I have talked about the State briefly. You can go through that to get a clear idea about when we need a state. previous The first state we need is in the container to store the user input. To handle the operation of the state we will use the useState hook. SearchBar The useState hook returns a current state and a function to update it. Wait... seems confusing? Let’s clear two questions first to minimize the confusion. How to access the hook? useState How to use the hook? useState // Answer to the question No. 1
import { useState} from 'react';

// Answer to the question No. 2
const [value, setValue] = useState(0) // 0 is the default value Here the value is the current state and is the function to update the value. And 0 is the default value that we pass as an argument in the hook. setValue useState We need a state to store the user’s input. Now we can add it to our SearchBar component. When the user makes changes to the input field we have to set the value in the state. So the code in the SearchBar will look like this //SearchBar.jsx
import { useState } from 'react';

const SearchBar = () => {
  const [cityName, setCityName] = useState('');

  onFormSubmit = (event) => {
    event.preventDefault();
  }

  onInputChange = (event) => {
    setCityName(event.target.value);
  }
  
  return (
    <div className="w-80 mt-20">
      <form className="w-100" onSubmit={onFormSubmit}>
        <div className="w-60 m-auto d-flex justify-content-center">
          <input 
            className="w-75"
            type="text"
            placeHolder="Enter city name"
            value={cityName}
            onChange={onInputChange}
          />
          <button type="submit" className="w-25">Search</button>
        </div>
      </form>
    </div>
  );
}

export default SearchBar; API Integration As we got the user input now it’s time to get data according to that. As I mentioned I will be using service to get the data. OpenWeatherMap If you don’t have an account please create one by using this link . https://home.openweathermap.org/users/sign_up Click on your username and then click to generate one. Create a file in the root directory of your project then add the following info in there. ‘My API keys‘ .env REACT_APP_API_URL='https://api.openweathermap.org/data/2.5'
REACT_APP_API_KEY=YOUR_API_KEY It’s time to create a method in our file. Let’s name it as onSearchSubmit. There we will perform the API call based on the provided text. App.jsx Don’t forget to pass it as a prop into the SearchBar component. Then call it inside method. onFormSubmit //SearchBar.jsx
import { useState } from 'react';

const SearchBar = ({ onSearchSubmit}) => {
  const [cityName, setCityName] = useState('');

  onFormSubmit = (event) => {
    event.preventDefault();
    setCityName('');
    onSearchSubmit(cityName);
  }

  onInputChange = (event) => {
    setCityName(event.target.value);
  }
  
  return (
    <div className="w-80 mt-20">
      <form className="w-100" onSubmit={onFormSubmit}>
        <div className="w-60 m-auto d-flex justify-content-center">
          <input 
            className="w-75"
            type="text"
            placeHolder="Enter city name"
            value={cityName}
            onChange={onInputChange}
          />
          <button type="submit" className="w-25">Search</button>
        </div>
      </form>
    </div>
  );
}

export default SearchBar;

//App.jsx
import './App.css'
import SearchBar from './SearchBar';

const App = () => {
  const onSearchSubmit = async (text) => {
    try {
      await fetch(`${process.env.REACT_APP_API_URL}/weather?q=${text}&units=metric&appid=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(result => {
        setData(result)
        console.log(result);
      });
    } catch (err) {
      console.error('err', err);
    }
  }
  return(
    <div className="ui container" style={{marginTop: '10px'}}>
      <h3 className="text-center">Get Weather Info</h3>
      <SearchBar onSearchSubmit={onSearchSubmit} />
    </div>
  )
}

export default App; Now go to the webpage, open your browser developer console then search with your city name. You should see an object similar to the following. Display the Data Great, now all we need to do is just store the value in a state, after that pass it in our displaying component. I will call that component Weather. Let’s create a file called and fill it with the following code. Weather.jsx //Weather.jsx
const Weather = ({ weatherData }) => {
  return(
    <div className="container w-50 mt-5 m-auto border border-secondary p-2">
      { weatherData && (
        <>
          <div className="d-flex justify-content-between">
            <h6>Name </h6>
            <small className="text-muted">{weatherData.name}</small>
          </div>
          <div className="d-flex justify-content-between">
            <h6>Feels Like</h6>
            <small className="text-muted">{weatherData.main.feels_like}</small>
          </div>
        </>
      )}
      { !weatherData && (
        <p className="text-center">Search by city name to get data</p>
      )}
    </div>
  )
}

export default Weather; And the final code of the will look like this: App.jsx // App.jsx
import { useState } from 'react';
import './App.css'
import SearchBar from './SearchBar';
import Weather from './Weather';

const App = () => {
  const [data, setData] = useState(null);

  const onSearchSubmit = async (text) => {
    try {
      await fetch(`${process.env.REACT_APP_API_URL}/weather?q=${text}&units=metric&appid=${process.env.REACT_APP_API_KEY}`)
      .then(res => res.json())
      .then(result => {
        setData(result)
        console.log(result);
      });
    } catch (err) {
      console.error('err', err);
    }
  }

  return(
    <div className="ui container" style={{marginTop: '10px'}}>
      <h3 className="text-center">Get Weather Info</h3>
      <SearchBar onSearchSubmit={onSearchSubmit} />
      <Weather weatherData={data} />
    </div>
  )
}

export default App; We are ready, now you can search with your city to see the weather information. Well, is not tough to use a hook in your project. All you need to do is break your vision into several missions then complete them one by one. For More Information: https://reactjs.org/ https://getbootstrap.com/ https://openweathermap.org/

Fetch

Target

Fetch Data From an API in React.js Using React Hooks

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

How to Fetch Data From an API in React.js

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

How to Fetch Data From an API in React.js

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps