custom hook in stack blitz using react

Question

I am trying to learn custom hook by following the below tutorial in w3schools but I am getting the below error in stackblitz. Can you let me know how to fix it. Providing the code and fiddle below. I googled but still no luck.

`Error in /~/src/useFetch.js (3:18) Module undefined not declared as a System.registerDynamic dependency of https://react-6tdyn9.stackblitz.io/~/src/useFetch.js

https://stackblitz.com/edit/react-6tdyn9?file=src%2Findex.js,src%2FuseFetch.js,src%2FApp.js

https://www.w3schools.com/react/react_customhooks.asp

mport { useState,useEffect } from react;

const useFetch = () => {

  const [data, setData] = useState(null);

  useEffect (() =>{
    fetch(url)
    .then((res) => res.json())
    .then((data) => setData(data));

  }, [url]);

  return [data];

};

export default useFetch;

Answer 1

There are a couple of issues in your code. Firstly the import React statment should be in string.

import { useState, useEffect } from "react"; // Like this

Next, you are missing the url paramter in your hook. You seem to have passed it on the useEffect by mistake.

const useFetch = (url) => {  // ==> Add Url Parameter here

  const [data, setData] = useState(null);

  useEffect (() =>{
    fetch(url)
    .then((res) => res.json())
    .then((data) => setData(data));

  }, [url]);

  return [data];

};