Api data not rendering - react-CodePudding

I'm trying to render API data but for some reason, I'm unable to do it.

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

  const fetchData = () => {

    return (
      fetch('https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => {
        console.log('Error fetching and parsing data', error)
      })
    )
  }

useEffect(() => {
     fetchData()
  }, []);

console.log('API DATA', data) I'm getting the response back but I'm not sure why its not able to loop through. I guess its because the data is in JSON format?

return (
 {       
   data.length > 0 && data.map((item, index) => {
    <div key={index}>{item.title}</div>
   })
 }
)

CodePudding user response：

You aren't returning anything after mapping through the array, update your return statement as:

  return (
    <>
      {data.length > 0 &&
        data.map((item, index) => {
          return <div key={index}>{item.title}</div>;
        })}
    </>
  );

 return (
    <>
      {data.length > 0 &&
        data.map((item, index) => <div key={index}>{item.title}</div>)}
    </>
  );

Also, JSX expressions should have only one parent element. Ensure wrapping the return in a fragment, i.e, <>

CodePudding user response：

I prefer axios and useRef for API

  const [myData, setMyData, myDataRef] = useStateRef([]);

  const getData = () => {
    axios
      .get("https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf")
      .then((res) => {
        let data = res.data;
        console.log(data);
        setMyData(data);
      });
  };

  useEffect(() => {
    getData();
  }, []);



 <div>
    {myDataRef.current.length > 0 &&
      myDataRef.current.map((item, index) => {
        return <div key={index}>{item.title}</div>;
      })}
  </div>

Codesandbox