List With Modification Button For Each Element

I have a React Redux app that shows a list of cars parked in a chosen parking, but not all cars, only those with a property called parked=true.

I'm using APIs to modify and get elements from the database, now I need a PUT request to modify the state of each car to parked=false and so remove it from the list. I already have the PUT function (which I linked below).

My problem is that the function needs the ID of the element and I don't know how to pass it to the function.

Here's my code (voiture means car):

this is my function in my actions.js

export const ParkedModifié =(voiture) => ({
    type: VOITURE_MODIFIED,
    voiture
});
//PUT request
export const notParked = (id)=>{
    return(dispatch)=>{
        return requests.put(
            `/voitures/${id}`,
            {
                parked: false
            }
        ).then(response => dispatch(ParkedModifié(response)))
    }
}

and here's my carList.js

        return (

            <div className="card mb-3 mt-3 shadow-sm">
                { voitureList.map(voiture => {
                    return (

                      <div className="card-body border-bottom" key={voiture.id}>
                         <p className="card-text mb-0">
                             {voiture.matricule}
                         </p>
                         <p className="card-text">
                         <small className="text-muted">{timeago().format(voiture.gareele)}</small>
                         </p>

                         <Button color="danger" onClick={this.onSubmit}>Change</Button>
                         </div>         
                    );
                })}
            </div>
        )
    }

Following pattern is what I always use. That way, you don t pass a function with different reference each time. In this case which would lead your Button component to rerender for nothing, whenever this parent component renders.

So what we do here is to pass onSubmit and read from 'data-' attribute inside.

        onSubmit = event => {
           const id = event.currentTarget.getAttribute('data-id')
           // use id however you want
        }


        return (

        <div className="card mb-3 mt-3 shadow-sm">
            { voitureList.map(voiture => {
                return (

                  <div className="card-body border-bottom" key={voiture.id}>
                     <p className="card-text mb-0">
                         {voiture.matricule}
                     </p>
                     <p className="card-text">
                     <small className="text-muted">{timeago().format(voiture.gareele)}</small>
                     </p>

                     <Button 
                        color="danger" 
                        data-id={voiture.id}
                        onClick={this.onSubmit}
                     >
                       Change
                     </Button>
                     </div>         
                );
            })}
        </div>
    )
}