React Function Component - Fetch (Ajax)

About

React - Fetch in a function component

Articles Related

Example

• A UD DOM function component defining the MyComponent tag

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

  React.useEffect(() => {
    fetch("/doc/json/items.json")
      .then(res => res.json())
      .then(
        (result) => { setItems(result.items); setIsLoaded(true);  },
        // 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) => { setError(error); setIsLoaded(true);   }
      )
   });
   
   if (error) {
      return (<div>Error: {error.message}</div>);
   } else if (!isLoaded) {
      return (<div>Loading...</div>);
   } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
}

• Rendering

ReactDOM.render(
  <MyComponent/>,
  document.getElementById('root')
);

• The standard mandatory “root” DOM node (placeholder for React DOM manipulation)

<div id="root"></div>

• Output: