Abnormal behaviour of radio button when click - html

Question

I have created a radio button in parent and child relationship. Like main is parent and sub is its child.
When I checked the parent div radio button, and after that trying to checked the its child div radio button, then parent div radio button automatically unchecked. I don't know how ?
Here is the code .
import React from 'react';
class Body extends React.Component {
constructor(props) {
super(props);
this.state = {
length :1,
arr:[{
subLen:2
},{
subLen:0
},{
subLen:1
}]
}
this.addMain = this.addMain.bind(this);
this.addSub = this.addSub.bind(this);
}
addMain(event) {
let temp = this.state.arr;
temp.push({subLen:0});
this.setState({arr:temp});
}
addSub(event,i){
console.log("add sub click ",i);
let temp = this.state.arr;
temp[i].subLen=temp[i].subLen+1;
this.setState({arr:temp},()=>{
console.log(this.state.arr);
});
}
render() {
return (
<div>
{
this.state.arr.map((e1,i1)=>{
return <div>
<h1>Main part</h1>
<input type="text" name={`${i1}name`}
placeholder="Enter name"/><br/>
Male:<input type="radio" name=
{`${i1}gender`} value="Male"/>
Female:<input type="radio" name=
{`${i1}gender`} value="Female"/>
{e1.subLen> 0 && <h2>Sub Part</h2>}
{e1.subLen > 0 &&
Array(e1.subLen).fill().map((e2,i2)=>{
return <div>
<input type="text" name=
{`${i2}name`} placeholder="Enter name"/><br/>
Male:<input type="radio" name=
{`${i2}gender`} value="Male"/>
Female:<input type="radio" name=
{`${i2}gender`} value="Female"/>
</div>
})
}
<button onClick=
{(event)=>this.addSub(event,i1)}>Add Sub</button>
</div>
})
}
<button onClick={this.addMain}>Add More</button>
<button onClick=
{()=>console.log(this.state.arr)}>Show</button>
</div>
)
}
}
export default Body;
As you see in the image that while clicking the sub part radio buttons main part radio button unchecked automatically
I don't know why this is happening ?

Answer 1

Issue
Because you are using an array index as part of the radio input name and with the same suffix (i.e. "gender") they become part of the same radio button group.
Solution
Use more specific names to disambiguate the main inputs from the sub inputs.
I suggest "main-${index}-name" and "main-${index}-gender" for the main inputs, and "sub-${index}-name" and "sub-${index}-gender" for the sub inputs.
{this.state.arr.map((e1, i1) => {
return (
<div>
<h1>Main part</h1>
<input type="text" name={`main-${i1}-name`} placeholder="Enter name" />
<br />
Male:
<input type="radio" name={`main-${i1}-gender`} value="Male" />
Female:
<input type="radio" name={`main-${i1}-gender`} value="Female" />
{e1.subLen > 0 && <h2>Sub Part</h2>}
{e1.subLen > 0 &&
Array(e1.subLen)
.fill()
.map((e2, i2) => {
return (
<div>
<input
type="text"
name={`sub-${i2}-name`}
placeholder="Enter name"
/>
<br />
Male:
<input type="radio" name={`sub-${i2}-gender`} value="Male" />
Female:
<input type="radio" name={`sub-${i2}-gender`} value="Female" />
</div>
);
})}
<button onClick={(event) => this.addSub(event, i1)}>Add Sub</button>
</div>
);
})}