Multiple logically separated radio buttons in the same ReactJS form - reactjs

Question

I am trying to build a very simple form structured with (ideally) a set of radio buttons, a set of checkbox and then another set of radio buttons. These are three different sections of the form I am trying to build.
I would like to keep the current form but I want the two set of radio buttons to be completely independent. First I am not sure they are with the current structure of the code. Second, for some reason, I can pick one option in the first set of radio buttons but the second set seems to be disabled (I can't pick neither long-running nor event-driven).
How can I achieve that? Thanks.
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
customer: "individualDev",
programmingmodel: "long-running",
isWebService: false,
isBatchJob: false,
isAiMl: false,
isDatabase: false,
isWorker: false,
};
}
onValChange = (event) => {
this.setState({
customer: event.target.value,
});
};
onCheckValChange = (e) => {
this.setState({ [e.target.name]: e.target.checked });
};
onSubmitForm = (event) => {
event.preventDefault();
console.log("state", this.state);
};
render() {
return (
<div className="App">
<form onSubmit={this.onSubmitForm}>
<br/>
<b> Customer segment </b>
<br/>
<br/>
<label>
<input
type="radio"
value="IndividualDev"
checked={this.state.customer === "IndividualDev"}
onChange={this.onValChange}
/>
<span>Individual Dev </span>
</label>
<label>
<input
type="radio"
value="Startup"
checked={this.state.customer === "Startup"}
onChange={this.onValChange}
/>
<span>Startup </span>
</label>
<label>
<input
type="radio"
value="smallBusiness"
checked={this.state.customer === "smallBusiness"}
onChange={this.onValChange}
/>
<span>Small Business </span>
</label>
<label>
<input
type="radio"
value="mediumBusiness"
checked={this.state.customer === "mediumBusiness"}
onChange={this.onValChange}
/>
<span>Medium Business </span>
</label>
<label>
<input
type="radio"
value="enterpriseIt"
checked={this.state.customer === "enterpriseIt"}
onChange={this.onValChange}
/>
<span>Enterprise IT </span>
</label>
<label>
<input
type="radio"
value="enterpriseLob"
checked={this.state.customer === "enterpriseLob"}
onChange={this.onValChange}
/>
<span>Enterprise LOB </span>
</label>
<br/>
<br/>
<br/>
<b> Workload </b>
<br/>
<br/>
<label>
<input
type="checkbox"
name="isWebService"
checked={this.state.isWebService}
onChange={this.onCheckValChange}
/>
<span>Web Service </span>
</label>
<label>
<input
type="checkbox"
name="isBatchJob"
checked={this.state.isBatchJob}
onChange={this.onCheckValChange}
/>
<span>Batch Job </span>
</label>
<label>
<input
type="checkbox"
name="isWorker"
checked={this.state.isWorker}
onChange={this.onCheckValChange}
/>
<span>Worker </span>
</label>
<label>
<input
type="checkbox"
name="isAiMl"
checked={this.state.isAiMl}
onChange={this.onCheckValChange}
/>
<span>AI/ML </span>
</label>
<label>
<input
type="checkbox"
name="isDatabase"
checked={this.state.isDatabase}
onChange={this.onCheckValChange}
/>
<span>Database </span>
</label>
<br/>
<br/>
<br/>
<b> Programming model </b>
<br/>
<br/>
<label>
<input
type="radio"
name="long-running"
checked={this.state.programmingmodel === 'long-running'}
onChange={this.onValChange}
/>
<span>Long-running </span>
</label>
<label>
<input
type="radio"
name="event-driven"
checked={this.state.programmingmodel === 'event-driven'}
onChange={this.onValChange}
/>
<span>Event-driven </span>
</label>
<br/>
<br/>
<br/>
<br/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;

Answer 1

You should use the same logic that you have already implemented in the checkboxes. Set a name attribute to the radio button and set your state by the [event.target.name]: event.target.value method. Like so:
import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = {
customer: "individualDev",
programmingmodel: "long-running",
isWebService: false,
isBatchJob: false,
isAiMl: false,
isDatabase: false,
isWorker: false,
};
}
onValChange = (event) => {
this.setState({
[event.target.name]: event.target.value,
});
};
onCheckValChange = (e) => {
this.setState({ [e.target.name]: e.target.checked });
};
onSubmitForm = (event) => {
event.preventDefault();
console.log("state", this.state);
};
render() {
return (
<div className="App">
<form onSubmit={this.onSubmitForm}>
<br/>
<b> Customer segment </b>
<br/>
<br/>
<label>
<input
type="radio"
value="IndividualDev"
name="customer"
checked={this.state.customer === "IndividualDev"}
onChange={this.onValChange}
/>
<span>Individual Dev </span>
</label>
<label>
<input
type="radio"
value="Startup"
name="customer"
checked={this.state.customer === "Startup"}
onChange={this.onValChange}
/>
<span>Startup </span>
</label>
<label>
<input
type="radio"
value="smallBusiness"
name="customer"
checked={this.state.customer === "smallBusiness"}
onChange={this.onValChange}
/>
<span>Small Business </span>
</label>
<label>
<input
type="radio"
value="mediumBusiness"
name="customer"
checked={this.state.customer === "mediumBusiness"}
onChange={this.onValChange}
/>
<span>Medium Business </span>
</label>
<label>
<input
type="radio"
value="enterpriseIt"
name="customer"
checked={this.state.customer === "enterpriseIt"}
onChange={this.onValChange}
/>
<span>Enterprise IT </span>
</label>
<label>
<input
type="radio"
value="enterpriseLob"
name="customer"
checked={this.state.customer === "enterpriseLob"}
onChange={this.onValChange}
/>
<span>Enterprise LOB </span>
</label>
<br/>
<br/>
<br/>
<b> Workload </b>
<br/>
<br/>
<label>
<input
type="checkbox"
name="isWebService"
checked={this.state.isWebService}
onChange={this.onCheckValChange}
/>
<span>Web Service </span>
</label>
<label>
<input
type="checkbox"
name="isBatchJob"
checked={this.state.isBatchJob}
onChange={this.onCheckValChange}
/>
<span>Batch Job </span>
</label>
<label>
<input
type="checkbox"
name="isWorker"
checked={this.state.isWorker}
onChange={this.onCheckValChange}
/>
<span>Worker </span>
</label>
<label>
<input
type="checkbox"
name="isAiMl"
checked={this.state.isAiMl}
onChange={this.onCheckValChange}
/>
<span>AI/ML </span>
</label>
<label>
<input
type="checkbox"
name="isDatabase"
checked={this.state.isDatabase}
onChange={this.onCheckValChange}
/>
<span>Database </span>
</label>
<br/>
<br/>
<br/>
<b> Programming model </b>
<br/>
<br/>
<label>
<input
type="radio"
name="programmingmodel"
value="long-running"
checked={this.state.programmingmodel === 'long-running'}
onChange={this.onValChange}
/>
<span>Long-running </span>
</label>
<label>
<input
type="radio"
name="programmingmodel"
value="event-driven"
checked={this.state.programmingmodel === 'event-driven'}
onChange={this.onValChange}
/>
<span>Event-driven </span>
</label>
<br/>
<br/>
<br/>
<br/>
<button type="submit">Submit</button>
</form>
</div>
);
}
}
export default App;