Assigning unique references to input fields within an iteration - reactjs

Question

I have a table that gets generated by a fetched map and builds a row for each payer within this map.
Each row contains payer name, two input fields, and a button with an onClick event handler.
On submit, the system shall take
payer id,
transaction id (gathered from props),
payer value (a custom field not related to payer object)
payer notes (again, a custom field not related to payer object)
and POST this to an endpoint.
I am looking for a way to pass the correct parameters to the onClick handler - when there are an indefinite amount of inputs generated - as my current solution only registers the last field in the map.
You will see that I use some references within the input elements - I was experimenting with them to see if I can achieve some sort of result, however, I had no luck - and, yes, they were declared in the constructor.
constructor
constructor(props) {
super(props);
this.state = {
payers: []
}
this.closeModal = this.closeModal.bind(this);
this.confirmTransaction = this.confirmTransaction.bind(this);
}
Relevant render()
render() {
const tableHeader = (
<thead>
<tr>
<td>Name</td>
<td>Value</td>
<td>Notes</td>
<td></td>
</tr>
</thead>
)
const payersList = this.state.payers.map(payer => {
return (
<React.Fragment>
<tr>
<td className="font-italic" key={payer.id}>{payer.name}</td>
<td>
<input className="form-control form-control-sm" type="text" placeholder={this.props.transaction.debit} ref={value => this.payerValue = value} />
</td>
<td>
<input className="form-control form-control-sm" type="text" ref={notes => this.payerNotes = notes} />
</td>
<td>
<button onClick={() => this.confirmTransaction(this.props.transaction.id, payer.name, this.payerValue.value, this.payerNotes.value)}>OK</button>
</td>
</tr>
</React.Fragment>
)
});
Confirm transaction handler
confirmTransaction(id, name, value, notes) {
alert(`This will set ${name} as a payer for transaction ${id} for the value of ${value} with the notes ${notes}`)
}
Example output (missing ${value} and ${notes})

Answer 1

well i would split this into 2 components and 1 container.
ListContainer : will hold you logic and render list
<ListComponent payers={[..payers]} onClick={this.setPayer}/> : this will render rowComponent
<RowComponent payer={{id:1}} onClick={props.onClick} /> : this will render a row.
now props.onClick is a function on ListContainer and inside RowComponent you should call this function with the object you have.
example:
https://codesandbox.io/s/peaceful-northcutt-jn769?fontsize=14
good luck :)
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function Row({ payer, onClick }) {
const [value, onChange] = useState(payer.value);
// dont forget to update value if parent changed for somereason
useEffect(() => {
if (payer.value !== value) {
onChange(payer.value);
}
}, [payer]);
return (
<li>
<label>{payer.name}</label>
<input value={value} onChange={e => onChange(e.target.value)} />
<button onClick={e => onClick({ ...payer, value })}>save</button>
</li>
);
}
function ListComponent({ payers, onClick }) {
return (
<ul>
{payers.map(payer => (
<Row key={payer.id} payer={payer} onClick={onClick} />
))}
</ul>
);
}
function ListContainer() {
const [payers, addPayer] = useState([
{ id: 1, name: "a", value: 1 },
{ id: 2, name: "b", value: 2 }
]);
function setPayer(payer) {
alert("payer is " + JSON.stringify(payer));
addPayer(payers.filter(i => i.id !== payer.id).concat(payer));
}
return (
<div className="App">
<ListComponent onClick={setPayer} payers={payers} />
<pre>{JSON.stringify(payers, null, 2)}</pre>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<ListContainer />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>