Passing an array to textfield - reactjs

Question

I have this response back from the backend, and apparently it's a collection of objects,
"deductions": [
{
"id": 3,
"receiptId": 3,
"type": "loan",
"amount": 200,
"reason": "You have took a loan...",
"createdAt": "2022-02-28T13:16:38.219Z",
"updatedAt": "2022-02-28T13:16:38.219Z",
"deletedAt": null
}
]
And I have three fields contained within the "Deduction" array and I used "TextField" as shown in the code
But the problem is that "deduction" is an array, I didn't know how to pass it to display all of them on the screen
<tbody>
<tr>
<td>
<Controller
name="deductions.amount"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
// error={!!errors.salary.amount}
required
// helperText={errors?.salary.amount?.message}
// label="amount"
autoFocus
id="deductions.amount"
variant="outlined"
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">£</InputAdornment>
),
}}
/>
)}
/>
</td>
<td>
<Controller
name="deductions.type"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
// error={!!errors.salary.bonus}
required
// helperText={errors?.salary.bonus?.message}
// label="Type"
autoFocus
id="deductions.type"
variant="outlined"
fullWidth
/>
)}
/>
</td>
<td>
<span className="truncate">
{" "}
<Controller
name="deductions.reason"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
// error={!!errors.salary.workStartDate}
required
// helperText={errors?.salary.workStartDate?.message}
// label="Reason"
autoFocus
id="deductions.reason"
variant="outlined"
fullWidth
/>
)}
/>
</span>
</td>
</tr>
</tbody>
I tried to use the map, but it failed
how can i solve the problem?
{order.deductions.map((deduction) => (
<tr key={deduction.id}>
<td>
<Controller
name="deductions.amount"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
// error={!!errors.salary.amount}
required
// helperText={errors?.salary.amount?.message}
// label="amount"
autoFocus
id="deductions.amount"
variant="outlined"
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
£
</InputAdornment>
),
}}
/>
)}
/>
</td>
<td>
<Controller
name="deductions.type"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
// error={!!errors.salary.bonus}
required
// helperText={errors?.salary.bonus?.message}
// label="Type"
autoFocus
id="deductions.type"
variant="outlined"
fullWidth
/>
)}
/>
</td>
<td>
<span className="truncate">
{" "}
<Controller
name="deductions.reason"
control={control}
render={({ field }) => (
<TextField
{...field}
className="mt-8 mb-16"
// error={!!errors.salary.workStartDate}
required
// helperText={errors?.salary.workStartDate?.message}
// label="Reason"
autoFocus
id="deductions.reason"
variant="outlined"
fullWidth
/>
)}
/>
</span>
</td>
</tr>
))}

Answer 1

i hope you want to set response data to the input fields, so you can do as shown below
{order?.deductions.map((deduction, index) => (
<tr key={deduction.id}>
<td>
<Controller
name={deduction.amount}
control={control}
render={({ field }) => (
<TextField
{...field}
value={deduction.amount}
className="mt-8 mb-16"
// error={!!errors.salary.amount}
required
// helperText={errors?.salary.amount?.message}
// label="amount"
autoFocus
id={deduction.amount}
variant="outlined"
fullWidth
InputProps={{
startAdornment: (
<InputAdornment position="start">
£
</InputAdornment>
),
}}
/>
)}
/>
</td>
<td>
<Controller
name={deduction.type}
control={control}
render={({ field }) => (
<TextField
{...field}
value={deduction.type}
className="mt-8 mb-16"
// error={!!errors.salary.bonus}
required
// helperText={errors?.salary.bonus?.message}
// label="Type"
autoFocus
id={deduction.type}
variant="outlined"
fullWidth
/>
)}
/>
</td>
<td>
<span className="truncate">
{" "}
<Controller
name={deduction.reason}
control={control}
render={({ field }) => (
<TextField
{...field}
value={deduction.reason}
className="mt-8 mb-16"
// error={!!errors.salary.workStartDate}
required
// helperText={errors?.salary.workStartDate?.message}
// label="Reason"
autoFocus
id={deduction.reason}
variant="outlined"
fullWidth
/>
)}
/>
</span>
</td>
</tr>
))}