React Hook radio buttons in map function

Question

I have a map function inside a map function where i need to get values from a radio button. but the problem is i need to select one radio button from a row but it would select all Below is my code

<TableHead>
    <TableRow>
        <TableCell />
            <TableCell align="center">None</TableCell>
            {roleTypeProject.map(item => {
                return <TableCell align="center">{item.label}</TableCell>;
            })}
    </TableRow>
</TableHead>
<TableBody>
<TableRow key={item.id}>
    <TableCell>{item.label}</TableCell>
        <TableCell align="center">
            <Controller
                name={`radio_${item.name}`}
                control={control}
                render={({ field }) => {
                    return (
                        <Radio                                                                   
                         {...field}
                         name={`radio_${item.name}`}
                         color="primary"
                         disabled={item.name === 'owner'}
                         value="none"
                         inputProps={{ 'aria-label': item.name }}
                        />
                    );
                }}
            />
        </TableCell>
        {roleTypeProject.map(p => {
            return (
                <TableCell align="center">
                    <Controller
                        name={`radio_${item.name}`}
                        control={control}
                        render={({ field }) => {
                        return (
                            <Radio
                                {...field}
                                name={`radio_${item.name}`}
                                disabled={
                                    item.name === 'owner' &&
                                    p.name === 'viewer'
                                        }
                                color="primary"
                                value={`${item.id} ${p.id}`}
                                inputProps={{ 'aria-label': item.name }}
                            />
                        );
                    }}
                />
            </TableCell>
        );
    })}
</TableRow>

So ive figured out my payload and all the only problem im having at the moment is that all radio buttons can be selected while i want one of them per row.

Answer 1

I tried to reproduce your scenario on the basis of your code snippet, not sure if the data structure is correct or the same as in your code (i combined both arrays in my code example, but you should get the idea). The problem in your code is, that you iterate roleTypeProject outside of the <Controller /> while instead you should do it inside the render prop. This way there will be one field for each row which RHF can manage.

<Table>
  <TableHead>
    <TableRow>
      <TableCell />
      {columns.map(({ id, label }) => (
        <TableCell key={id} align="center">
          {label}
        </TableCell>
      ))}
    </TableRow>
  </TableHead>
  <TableBody>
    {rows.map(({ id, name, label }) => (
      <TableRow key={id}>
        <TableCell>{label}</TableCell>
        <Controller
          name={name}
          control={control}
          render={({ field: { value, ...field } }) =>
            columns.map(({ id, name: optionName }) => (
              <TableCell key={id}>
                <Radio
                  {...field}
                  checked={value === optionName}
                  value={optionName}
                />
              </TableCell>
            ))
          }
        />
      </TableRow>
    ))}
  </TableBody>
</Table>