pass row values to function in React - reactjs

Question

i am building a table with SQLite Data in React. But i have troubles with passing the [parts] from a specific table row to another function which should show a detail view of the table Row.
This is the table itself:
class Table extends Component {
constructor(props) {
super(props)
this.state = {
parts: [],
isLoading: false,
isError: false,
show: false
}
}
async componentDidMount() {
this.setState({ isLoading: true })
const response = await fetch(`${API_ENDPOINT}/api/bestand`)
if (response.ok) {
const parts = await response.json()
this.setState({ parts, isLoading: false })
} else {
this.setState({ isError: true, isLoading: false })
}
}
render() {
const { parts, isLoading, isError, show } = this.state
if (isLoading) {
return <div>Loading...</div>
}
if (isError) {
return <div>Error</div>
}
if (show === true) {
return this.state.show && this.editSection()
}
return parts.length > 0
? (
<table className="table" id="tblData" >
<thead>
<tr>
<th style={{borderTopLeftRadius: "4px"}}>Teilenummer</th>
<th>Hersteller</th>
<th>Beschreibung</th>
<th>Preis</th>
<th style={{borderTopRightRadius: "4px"}}>SKU</th>
</tr>
</thead>
<tbody>
{this.renderTableRows()}
</tbody>
</table>
) : (
<div>
No parts.
</div>
)
}
renderTableHeader = () => {
return Object.keys(this.state.parts[0]).map(attr =>
<th key={attr} >
{attr}
</th>)
}
renderTableRows = () => {
return this.state.parts.map(part => {
return (
<tr key={part.id} onClick={this.toggle}>
<td>{part.Teilenummer}</td>
<td>{part.Hersteller}</td>
<td>{part.Beschreibung}</td>
<td>{part.Preis}</td>
<td>{part.SKU}</td>
</tr>
)
})
}
with a toggle function i open a view with a form, and all the data from the row i clicked inside as a value.
toggle = () => {
this.setState((currentState) => ({ show: !currentState.show }))
}
detailview:
editSection = () => {
return this.state.parts.map(part => {
return (
<div>
<button className="detailClose" onClick={this.toggle}>✕</button>
<form key={part.id} method="POST">
<div className="Teilenummer">
<label>
Teilenummer:
<br />
<input
type="JSON"
className="teilenrinput"
name="Teilenummer"
id="Teilenummer"
value={part.Teilenummer}
required
/>
<br />
<br />
</label>
</div>
<div className="SKU">
<label>
SKU:
<br />
<input
type="text"
name="SKU"
className="skuinput"
id="SKU"
value={part.SKU}
required
/>
<br />
<br />
</label>
</div>
<div className="Price">
<label>
Preis:
<br />
<input
type="text"
name="Price"
className="priceinput"
id="Preis"
value={part.Preis}
required
/>
<br />
<br />
</label>
</div>
<div className="Hersteller">
<label>
Hersteller:
<br />
<input
list="manufacturers"
name="Hersteller"
id="Hersteller"
className="herstellerinput"
value={part.Hersteller}
required
></input>
<datalist id="manufacturers">
<option value="Volkswagen">Volkswagen</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Opel">Opel</option>
</datalist>
</label>
</div>
<div className="Beschreibung">
<label>
Beschreibung:
<br />
<input
type="text"
name="Beschreibung"
className="beschreibunginput"
id="Beschreibung"
value={part.Beschreibung}
required
/>
<br />
<br />
</label>
</div>
<input
className="Eintragen-Button"
type="submit"
value="Update "
/>
<span id="response"></span>
<button className="deleteButton" onClick={() => this.deleteTableRow(part.id)}>Delete</button>
</form>
</div>
)
})
}
}
the problem with the current solution is, i map all the data in the editSection function and as a result i render every table row in it, when i click on one row.
how do i map the id´s in a way, that the editSection only renders the row i clicked on in the table?
regards

Answer 1

You need to pass part of parts.map function to the toggle function like
onClick ={part=> this.toggle(part)}.
So than on click event handler you get the row specific value.
Now you can save this part object in state along with show property in toggle function, like
setState({show: someValue, activeRow: part})
Now while loading the form popup or like so, in editSection function use the state.activeRow properly.