Radio button not working correctly when rendered using array Data

Question

I have a React component that renders an array with an input field and a radio button. The input field is working fine but when clicking the radio button even though the state gets updated, the value is not reflected in the UI.

Following is the implementation of the React component

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [subTemplate, setSubTemplate] = useState([
    { name: 'main', outputFormat: 'html' },
    { name: 'something else', outputFormat: 'text' }
  ]);

  const handleInputChange = (value, row, key) => {
    const updatedSubTemplate = subTemplate.map(item => {
      if (item.name === row.name) {
        return {
          ...item,
          [key]: value
        };
      }
      return item;
    });
    console.log('updatedSubTemplate', updatedSubTemplate); // updatedSubTemplate consists of the modified value 
    setSubTemplate(updatedSubTemplate);
  };

  const renderSubTemplates = () => {
    return subTemplate.map((item, index) => {
      return (
        <div key={index}>
          <input
            type="text"
            value={item.name}
            onChange={e => {
              handleInputChange(e.target.value, item, 'name');
            }}
          />
          <div>
            <input
              type="radio"
              name="html"
              checked={item.outputFormat === 'html'}
              onChange={e => {
                handleInputChange(e.target.name, item, 'outputFormat');
              }}
            />
            HTML
          </div>
          <div>
            <input
              type="radio"
              name="text"
              checked={item.outputFormat === 'text'}
              onChange={e => {
                handleInputChange(e.target.name, item, 'outputFormat');
              }}
            />
            TEXT
          </div>
        </div>
      );
    });
  };
  return <div>{renderSubTemplates()}</div>;
}

Following is a stackblitz link for the above implementation : https://stackblitz.com/edit/react-ugat24

Note: The radio button works as expected if there's only 1 element in the array.

Shyam · Accepted Answer · 2021-09-02 04:53:51Z

3

It is because you have different value in name attribute.

Radio buttons are used to select one option from a list of options. so they need to have the same name to group them .

 <input
    type="radio"
    name={`group-${index}`}
    checked={item.outputFormat === 'html'}
    onChange={e => {
         handleInputChange('html', item, 'outputFormat');
    }}
  />

Working Sample

https://stackblitz.com/edit/react-4xxpev

edited Sep 2, 2021 at 4:53

answered Sep 2, 2021 at 4:45

Shyam

5,5071 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemand S · Accepted Answer · 2021-09-02 05:15:29Z

1

There are 2 issues in your code.

You are passing the same name attribute for all the radio inputs.
You are passing the wrong value for the radio elements.

Use template literals to append the index value to each set of radio group elements in the array.

Here's working code

References

answered Sep 2, 2021 at 5:15

Hemand S

771 silver badge5 bronze badges

Collectives™ on Stack Overflow

Radio button not working correctly when rendered using array Data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related