React functional component popups based on each id click on edit - reactjs

Question

I have to add and edit person's experience details through reactjs popups, so that I have Experience component, ExperienceAddPopup component, and ExperienceEditPopup component. So on each click on add(+) button there appears a popup to add person's experience details. This thing is working fine.
Also on click of edit button popup shows but without datas. Now my issue is all the added details I have to edit on click on each edit button (pencil image) based on each clicked id's (not working). how to pass ids on edit modal popups here on edit click?
Here is my code
Experience.js component
import React, {useState, useEffect, Component } from "react";
import axios from 'axios';
import { Modal } from 'react-bootstrap';
import ExperienceAddPopup from "./ExperiencePopup";
import ExperienceEditPopup from "./ExperienceEditPopup";
export default function Experience({logged_user}) {
const [modalShow, setModalShow] = React.useState(false);
const [show, setShow] = useState(false);
return (
<div className="exp-details">
{experienceArray.map((experience, i) => {
return(
<span key={experience.id}>
<div className="exph1">{experience.title} <span onClick={() => setModalShow(true)}><FontAwesomeIcon className="nav-icon float-right text-muted" icon={faPencilAlt} /></span></div>
<ExperienceEditPopup logged_user={singleUserDetail.actable_id}
show={modalShow}
onHide={() => setModalShow(false)}
/>
<div className="exph2">{experience.company_name}.</div>
<div className="exph3">{experience.start_year} - {experience.end_year}</div>
<hr/>
</span>
);
})
}
</div>
)
}
ExperienceEditPopup.js
import React, {useState, useEffect, Component } from "react";
import axios from 'axios';
import { Modal } from 'react-bootstrap';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faPencilAlt} from '#fortawesome/free-solid-svg-icons';
const ExperienceEditPopup = props => {
#how to get edit clicked ids based popups here?
let logged_user_id = props.logged_user;
let experience_id = # here i need to get the expereince id on each popup click
const [show, setShow] = useState(false);
const handleClose = () => setShow(false); #here i need to close popups based on edit button click
const handleShow = () => setShow(true); #here i need to show popups based on edit button click
const [experienceArray, setexperienceArray] = React.useState([]);
const getexperienceUserDetails = (experience_id, logged_user_id) => {
axios
.get(`http://localhost:3001/users/${logged_user_id}/experiences/${experience_id}`, { withCredentials: true })
.then((response) => {
const experienceArray = response.data;
setexperienceArray(experienceArray);
console.log(experienceArray);
})
.catch((error) => {
console.log(" error", error);
});
};
React.useEffect(() => {
if (experience_id) {
getexperienceUserDetails(experience_id, logged_user_id);
}
}, [experience_id,logged_user_id]);
return (
<Modal {...props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered >
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLongTitle">Edit Experience</h5>
<button type="button" className="close" onClick={props.onHide} aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form onSubmit={handleExperienceEditSubmit}>
<div className="modal-body">
<input type="text" class="form-control" defaultValue={experienceArray.title} name="title" onChange={handleChange} placeholder="Designation" />
<input type="text" class="form-control" defaultValue={experienceArray.company_name} name="company_name" onChange={handleChange} placeholder="Company Name" />
<input type="text" defaultValue={experienceArray.location} class="form-control" name="location" onChange={handleChange} placeholder="Location"></input>
</div>
<div className="modal-footer">
<span className="btn_cls"><button className="btn save-btn">Save</button></span>
</div>
</form>
</Modal>
);
}
export default ExperienceEditPopup;

Answer 1

You have a single state for all Popups.
const [modalShow, setModalShow] = React.useState(false);
You could store the experience.id so you could render the right modal.
const [modalShow, setModalShow] = React.useState(-1);
Also, you will need to change the trigger function
<span onClick={() => setModalShow(experience.id)}>
You may pass the experience_id here
<ExperienceEditPopup
logged_user={singleUserDetail.actable_id}
show={modalShow}
onHide={() => setModalShow(false)}
/>
Something like:
<ExperienceEditPopup
logged_user={singleUserDetail.actable_id}
experience_id={experience.id}
show={modalShow === experience.id}
setModalShow={setModalShow}
onHide={() => setModalShow(-1)}
/>
Inside your ExperienceEditPopup you don't need to control the visibility of it, so you don't need:
const [show, setShow] = useState(false)
Instead of that you could use the setModalShow that you might pass as a props to it.
I think you didn't really understand the code you wrote, ask to clarify your mind before asking for solutions, it's always a better approach