React passing all values as props instead of selected value-CodePudding

I am trying to make a popup modal for editing user's activity and I tried to pass the current Activity ID using props. However, it passed all value of Activity ID that user currently has. For example, if user has two activities from activityList which have ID 1 and 2, and when I click 2, the props passed would be both 1 and 2. However, I only want 2 to be passed.

{activityList.map((val, key) => {
                                return(
                                    <div key = {key}>
                                    
                                    <Row>
                                        <Col>
                                            {val.project_activity_title}
                                        </Col>
                                        <Col>
                                            {val.project_activity_information}
                                        </Col>
                                        <Col><Button variant="link" className = "btn btn-link mr-3"
                                             onClick=
                                             { () => setEdActivity(true)
                                            }
                                             >Edit</Button>
                                             <EditActivity
                                                activityID={val.project_activity_id} //pass activity ID here
                                                itemID={projectCode}
                                                show={edActivity}
                                                
                                                onHide={() => setEdActivity(false)}
                                            />
              
                                        </Col>
                                  

                                    </Row>
                                    
                                    </div>
                                )
})}

Anyone knows what I am doing wrong? Thank you!

CodePudding user response：

In continuation of my comment earlier,

Need more code here or some working example to answer accurately but this is my best guess. I think you are using EditActivity component is a modal window.

Which has hide/show mechanism with edActivity attribute/state for all instances in the loop.

That results in visibility of multiple modals.

Hence you're seeing multiple IDs.

Here's a possible solution which can help here. You need to set individual id for which you want to show the modal, for show/hide flag you can just compare the value of project_activity_id with edActivity state.

{activityList.map((val, key) => (
    <div key = {key}>
      <Row>
        <Col>
          {val.project_activity_title}
        </Col>
        <Col>
          {val.project_activity_information}
        </Col>
        <Col><Button variant="link" className = "btn btn-link mr-3"
          onClick={() => setEdActivity(val.project_activity_id)} // Updated setter
        >Edit</Button>
        <EditActivity
          activityID={val.project_activity_id} //pass activity ID here
          itemID={projectCode}
          show={edActivity === val.project_activity_id} // Updated Comparison
          onHide={() => setEdActivity(undefined)} // Updated setter
        />
        </Col>
      </Row>
    </div>
))}