React/pixabayAPI

yarn add axios
    

import React, {useState} from 'react';
import axios from 'axios';
import SearchBar from './components/SearchBar';
import ImageList from './components/ImageList';

const App = () => {
  const [images, setImages] = useState([]);
  const onSearchSubmit = async(term) => {
    try{
      const params = {
        key: "17704656-442463d147554724957b4cbd0",
        q: term
      }
      const response = await axios.get("https://pixabay.com/api/", {params});
      setImages(response.data.hits);
      if(response.data.total === 0){
        alert("0");
      }
    } catch{
      alert("error");
    }
  }

  return (
    div className="ui container">
      SearchBar onSubmit={onSearchSubmit} />
      ImageList images={images} />
    /div>
  );
}

export default App;

    

import React from "react"

const ImageList = (props) => {
    const images = props.images.map((image) => {
        return(
            a 
                href={image.pageURL}
                key={image.id}
                target="_blank"
                rel="noopener noreferrer"
                className="ui medium image"
            >
                img src={image.webformatURL} alt={image.tags} />
            /a>
        )
    });
    return div>{images}/div>
}

export default ImageList;

    

import React, {useState} from "react"

const SearchBar = ({onSubmit}) => {
    const [term, setTerm] = useState("");
    const onFormSubmit = (e) => {
        e.preventDefault();
        onSubmit(term);
    }

    return(
        <>
            form onSubmit={onFormSubmit} className="ui form">
                div className="field">
                    label>Image Search/label>
                    input
                        type="text"
                        name="search"
                        placeholder=""
                        value={term}
                        onChange={(e)=>setTerm(e.target.value)}
                    />
                /div>
            /form>
        
    )
}

export default SearchBar;