How to pass data received from a database as props to another component in react

Question

I am currently trying to send the data from my database to another component. The data is successfully showing in console.log, however, it is not showing on my component.

I know I am somehow passing the props incorrectly but not sure how.

My code is as follows:

    const showVetInfo = (event) => {
    event.currentTarget.classList.toggle('bg-salmon');
 
    let id = (event.currentTarget.id);
    console.log(id);

    axios.post('http://localhost:80/project-api/readActiveDoctor.php',userId )
    .then((res)=>{
      let data = res.data;
     let info =(data.map((item) =>  <DoctorInfo key={item.id} rerender={setRenderActiveVet} uniqueId={item.id} name={item.name} surname={item.surname} specialization={item.specialization} age={item.age} gender={item.gender} email={item.email} contact={item.phoneNumber} doctorId={item.doctorId} room={item.room} />)) 
  
       console.log(data);
    //   setActiveVet(renderActiveVet);
    //   setRenderActiveVet(false);
  
    })
    .catch(err=>{
      console.log(err);
    });


}




    return (
        <div>
          
             <button  onClick={showVetInfo}  className='individual-vet' id={props.uniqueId}   >
                     <div className='vet-block-img'>  <img className='profileImg vet' src={dp}/></div>
                     <div className='vet-block-text'>
                         <h2>Dr. {props.name + " " + props.surname}</h2>
                         <h4>{props.specialization}</h4>
                     </div>
                </button>
            
        </div>
    );
};

Answer 1

You could try something like this.

export const showVetInfo = (event) => {
    event.currentTarget.classList.toggle('bg-salmon');

    //initialize data
    const [data, setData] = useState([]);
    let id = (event.currentTarget.id);
    console.log(id);

    axios.post('http://localhost:80/project-api/readActiveDoctor.php',userId )
    .then((res)=>{
      //set data to response
      setData(res.data)
    //   setActiveVet(renderActiveVet);
    //   setRenderActiveVet(false);
  
    })
    .catch(err=>{
      console.log(err);
    });

    return (
        <div className="div">
            {data && data.map((item, index)=>{
                return <DoctorInfo key={index} rerender={setRenderActiveVet} uniqueId={item.id} name={item.name} surname={item.surname} specialization={item.specialization} age={item.age} gender={item.gender} email={item.email} contact={item.phoneNumber} doctorId={item.doctorId} room={item.room} />;
            })}
        </div>
    );

}

// second component --destructure props--
export const DoctorInfo = ({ name, surname, specialization, ...etc })=>{
    return (
        <div>
          
             <button  onClick={showVetInfo}  className='individual-vet' id={uniqueId}   >
                     <div className='vet-block-img'>  <img className='profileImg vet' src={dp}/></div>
                     <div className='vet-block-text'>
                         <h2>Dr. {name + " " + surname}</h2>
                         <h4>{specialization}</h4>
                     </div>
                </button>
            
        </div>
    );
}

Answer 2

const showVetInfo = (event) => {
    event.currentTarget.classList.toggle('bg-salmon');
 
    let id = (event.currentTarget.id);
    console.log(id);

    axios.post('http://localhost:80/project-api/readActiveDoctor.php',userId )
    .then((res)=>{
      let data = res.data;
    
  //create a state and set data to it.
  setstate(data);

       console.log(data);
    //   setActiveVet(renderActiveVet);
    //   setRenderActiveVet(false);
  
    })
    .catch(err=>{
      console.log(err);
    });


}

//Now map your inside the return
//suppose this is your first component in this component you passing props to //second component.

return(
//your jsx (html) code

state.map((data,index)=><DoctorInfo key={index} name={data.name} surname={data.surname} specialization={data.specialization} />))

//you some jsx code
)










//this is second component
    return (
        <div>
          
             <button  onClick={showVetInfo}  className='individual-vet' id={props.uniqueId}   >
                     <div className='vet-block-img'>  <img className='profileImg vet' src={dp}/></div>
                     <div className='vet-block-text'>
                         <h2>Dr. {props.name + " " + props.surname}</h2>
                         <h4>{props.specialization}</h4>
                     </div>
                </button>
            
        </div>
    );
};```

**i hope you understand if you still have problems in understanding please comment below. 
Happy Coding :)**