Breaking News: Grepper is joining You.com. Read the official announcement!

search query API example using react

Talented Thrush answered on April 8, 2022 Popularity 9/10 Helpfulness 2/10

answer search query API example using react

search query API example using react

Comment

function MyComponent() {
      const [error, setError] = useState(null);
      const [isLoaded, setIsLoaded] = useState(false);
      const [items, setItems] = useState([]);

      // Note: the empty deps array [] means
      // this useEffect will run once
      // similar to componentDidMount()
      useEffect(() => {
        fetch("https://api.example.com/items")
          .then(res => res.json())
          .then(
            (result) => {
              setIsLoaded(true);
              setItems(result);
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.
            (error) => {
              setIsLoaded(true);
              setError(error);
            }
          )
      }, [])

      if (error) {
        return <div>Error: {error.message}</div>;
      } else if (!isLoaded) {
        return <div>Loading...</div>;
      } else {
        return (
          <ul>
            {items.map(item => (
              <li key={item.id}>
                {item.name} {item.price}
              </li>
            ))}
          </ul>
        );
      }
    }

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.freecodecamp.org

Tags: api javascript search using

Link to this answer
Share Copy Link

Contributed on Apr 08 2022

Talented Thrush

0 Answers Avg Quality 2/10

search query API example using react

Contents

More Related Answers

search query API example using react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.