Api data not rendering - react

Question

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>
   })
 }
)

just remove that return inside fetchData function, no ned to return API call there — Sojin Antony
– Sojin Antony, Commented Feb 2, 2022 at 5:52

NeERAJ TK · Accepted Answer · 2022-02-02 06:04:10Z

6

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>;
        })}
    </>
  );

or

 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, <>

edited Feb 2, 2022 at 6:04

answered Feb 2, 2022 at 5:52

NeERAJ TK

2,7151 gold badge18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ganesh MB · Accepted Answer · 2022-02-02 06:20:14Z

1

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

edited Feb 2, 2022 at 6:20

answered Feb 2, 2022 at 6:02

Ganesh MB

1,1792 gold badges17 silver badges31 bronze badges

1 Comment

Zed Over a year ago

Really Appreciate it.

Collectives™ on Stack Overflow

Api data not rendering - react

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related