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>
              ))}

CodePudding user response：

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>
              ))}