Image from database not rendering in react

Question

So I am currently busy with a project which dynamically loads all the doctor cards of the doctors on the database. The information was initially rendering until I tried adding the profileImage through to render. Currently, I am getting the following error:

TypeError: Cannot read properties of undefined (reading 'profileImage')
    at Doctors.js:62:1
    at Array.map (<anonymous>)
    at Doctors.js:62:1

This is resulting in none of my cards appearing. My code is as follows:

This is in a separate doctors.js file:

const [renderVetInfo, setRenderVetInfo] = useState();
  const [vets, setVets] = useState();

  const user = sessionStorage.getItem('activeUser');

  const [userId, setUserId] = useState({
    activeUser: sessionStorage.getItem('activeUser'),
});



  useEffect(()=>{

    //render vet items
    axios.post('http://localhost:80/project-api/readDoctors.php',userId )
    .then((res)=>{
      let data = res.data;
      let id =data.id;
      console.log(data[0].profileImage);
      let renderVetInfo = data.map((item) =>  <VetItem key={item.id} rerender={setRenderVetInfo} uniqueId={item.id} name={item.name} surname={item.surname} specialization={item.specialization} profileImage={item[0].profileImage}  />);

      setVets(renderVetInfo);
      setRenderVetInfo(false);
      
    })
    .catch(err=>{
      console.log(err);
    });

 },[]);

Here is the VetItem component:

 //=============================================================================
//Attempt to render image on vetItem
//=============================================================================


  const [renderImage, setRenderImage] = useState();
  console.log(props.profileImage)
  let source = props.profileImage;
  let renderpath = 'http://localhost:80/project-api/' + source;
  setRenderImage(renderpath);
   
//=============================================================================
// html code
//=============================================================================
  
    return (
        
        <div className='vet'>
            <button  onClick={(e)=>{showVetInfo(e)}} className={activeButton === ("1") `enter code here`&& "active"} data-value={props.uniqueId} id={props.uniqueId}   >
            <div className='individual-vet' id={props.uniqueId}  >
             
                     <div className='vet-block-img'>  <img className='profileImg vet' `src={renderImage}/></div>`
                     <div className='vet-block-text'>
                         <h2>Dr. {props.name + " " + props.surname}</h2>
                         <h4>{props.specialization}</h4>
                     </div>
                </div>
                </button>
                <div className='docInfoComp'>

                {activeVet}    
                </div>
               
        </div>
    );
};

export default VetItem;

And lastly, this is a snippet of my database:

A G · Accepted Answer · 2022-06-24 15:06:02Z

1

Inside map, your accessing image as item[0], which would be undefined, should be item similar to other fields.

let renderVetInfo = data.map((item) => (
  <VetItem
    ...
    uniqueId={item.id}
    name={item.name}
    surname={item.surname}
    specialization={item.specialization}
    profileImage={item[0].profileImage} //item[0] is undefined
  />
));

should be

profileImage={item.profileImage}

Infinite loop issue -

You're updating state inside function body, setRenderImage(renderpath); which forces React to re-invoke your function again, with the same props, which ends up calling the state setter again, which triggers React to call your function again.. so an infinite loop.

You should update state inside useEffect, something like this -

useEffect(() => {
  let source = props.profileImage;
  let renderpath = 'http://localhost:80/project-api/' + source;
  setRenderImage(renderpath);
}, [profileImage]);

edited Jun 24, 2022 at 15:06

answered Jun 24, 2022 at 14:57

A G

22.9k12 gold badges94 silver badges113 bronze badges

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

3 Comments

Alexa Pettitt Over a year ago

Thank you for the answer, but when I do that I get this error:Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

A G Over a year ago

Please update state like setRenderImage inside useEffect. Also read - stackoverflow.com/questions/55265604/…

A G Over a year ago

Glad to help, I've updated the answer with some explanation for the infinite loop.

Collectives™ on Stack Overflow

Image from database not rendering in react

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related