Full-Stack React Projects - Second Edition

The Shops component

In the Shops component, we will render the list of shops in a Material-UI List, after fetching the data from the server and setting the data in a state to be displayed as shown in the following screenshot:

To implement this component, we first need to fetch and render the list of shops. We will make the fetch API call in the useEffect hook, and set the received shops array in the state, as shown here:

mern-marketplace/client/shop/Shops.js:

export default function Shops(){  const [shops, setShops] = useState([])  useEffect(() => {    const abortController = new AbortController()    const signal = abortController.signal    list ...