How to make an API request automatically in React?

Question

I'm trying to create a customised homepage for my browser. I have implemented an API to show the weather, but only works when I press enter. I want to display the data automatically when loads the page, without pressing enter, showing the Bristol weather automatically and when I type another location the api will be able to request and render. I tried a lot of ways like (removing the hook, changing the initial state of the hook but nothing seems to work)This is my code:

    const [query, setQuery] = useState('Bristol');
    const [weather, setWeather] = useState({});

const search = async () => {
    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then(res => res.json())
    .then(result => {
        setWeather(result);
        setQuery('')
        console.log(result)
    });
}

    return(
        <div className="app">
            <main>
                <div className="search-box">
                    <input
                        type="text"
                        className="search-bar"
                        placeholder="Search..."
                        onChange={e => setQuery(e.target.value)}
                        value={query}
                        onKeyPress={search}
                    />
                </div>
                {(typeof weather.main != "undefined") ? (
                    <div>
                    <div className="location-box">
                        <div className="location">{weather.name}</div>
                        <div className="date">{dateBuilder(new Date())}</div>
                    </div>
                        <div className="weather-box">
                            <div className="temp">
                                {Math.round(weather.main.temp)}
                            </div>
                            <div className="weather">
                                {weather.weather[0].main}
                            </div>
                        </div>
                    </div>
                ) : ('')}
            </main>
        </div>
    )
}

I'm new to ReactJS and it's a bit confusing, because here I use the same file to code and to render, I did this before but I was using plain JavaScript with express, etc.. and I rendered into an HTML.

you might be needed to revise ReactJS hooks reactjs.org/docs/hooks-overview.html. — Md. Abu Sayed
– Md. Abu Sayed, Commented Dec 23, 2020 at 13:11
Does this answer your question? How to call loading function with React useEffect only once — Nisharg Shah
– Nisharg Shah, Commented Dec 23, 2020 at 13:13
@NishargShah Almost there, It loads, but in less than 1 second clears automatically. — Gabriel Savian
– Gabriel Savian, Commented Dec 23, 2020 at 13:18

T.arar · Accepted Answer · 2020-12-23 13:05:57Z

1

useEffect( () => search(), [])

answered Dec 23, 2020 at 13:05

T.arar

1215 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ingmak Over a year ago

I guess the approach in my answer is more idiomatic as it will automatically re-execute the search when the query changes. Also it eliminates the imperative onKeyPress={search} event handler

T.arar Over a year ago

you can use useEffect and pass the search query to the dependecies table, so every time the variable changes it will make a re_render with the new result.

ingmak · Accepted Answer · 2020-12-23 13:15:58Z

1

Try wrapping the fetch call in useEffect:

  useEffect(() => {
    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
      .then((res) => res.json())
      .then((result) => {
        setWeather(result);
        console.log(result);
      });
  }, [query]);

The second argument is a so called dependency array. Whenever its contents change the effect will be rerun, see https://reactjs.org/docs/hooks-effect.html.

Also remove onKeyPress={search} as it is redundant with onChange={e => setQuery(e.target.value)}

Further resources:

Robin Wieruch: How to fetch data with React Hooks? https://www.robinwieruch.de/react-hooks-fetch-data

answered Dec 23, 2020 at 13:15

ingmak

1331 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to make an API request automatically in React?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related