The above error occurred due to <app> component

Question

import './App.css';
import React from 'react';
import axios from 'axios';
import {useState,useEffect} from 'react';

function App() {
  
  const [data,setData] = useState([]);
  useEffect(() => {
    axios
    .get("http://127.0.0.1:5000")
    .then((res)=>setData(res.data))
    .catch((err)=>console.log(err))
    });



   
  return (


    <div>
    <h1> images </h1>
    {console.log(data)}
    { data.map((singleData)=>{
      const base64String = btoa( String.fromCharCode(...new Uint8Array(singleData.img.data.data)));
      return <img src= {`data:image/png;base64,${base64String}`} alt="ajay" />
    })}
   </div>
  )
}

export default App;

this is the code i have written.

Screenshort of console

this error is being shown in console.

I am trying to fetch images from mongodb using nodejs in backend

Answer 1

here you are trying to useEffect without any dependencies due to which useEffect is running infinitely since you are changing states over here. use something like this

useEffect(()=>{},[]) 
for making api call only once when your component is rendered for first time 

you can read more about it from https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect