Start by installing the axios package:
Note: We are intentionally installing version 0.27.2, as this won't conflict with Jest, which we will use when writing tests.
We need this to make our GET request.
Inside your requests folder, create a file called getImages.js.
That file contents should look like this:
import axios from "axios";
const getImages = (query) => {
if (!query) {
return Promise.resolve([]);
} else {
return axios
.get(`https://images-api.nasa.gov/search?q=${query}`)
.then((response) => {
console.log(response)
})
.catch((err) => {
console.log(err);
});
}
};
export default getImages;
And finally, after we’ve updated our Search.js file with our handleSubmit it should look like this:
import React, { useState } from "react";
import "../styles/search.css";
import getImages from "../requests/getImages";
const Search = () => {
const [value, setValue] = useState();
const handleSubmit = (event) => {
event.preventDefault();
getImages(value);
};
return (
<div className="search">
<form className="search-form" onSubmit={handleSubmit}>
<input
className="search-input"
type="text"
onChange={(e) => setValue(e.target.value)}
/>
<button className="search-btn" type="submit">
Go!
</button>
</form>
</div>
);
};
export default Search;