How to configure two separate radio button / checkboxes

user_3146741 0
Viewed 28

ReactJS newbie here. I am trying to build a simple page that have two separate sections: a radio button (with 3 values) and a checkbox list (with other 3 values). The code I have below seems to be working for the first section (radio buttons) but it's broken for the checkbox list (basically it won't allow me to change the selection). I assume it's something around eventing but I am not sure. This is code I adapted from a sample with just the radio buttons section so I am sure I am doing it wrong.

Bonus points if you can also hint about how to make these two sections look separate on the page (right now they are all on the same row).

import React, { Component } from 'react';

class App extends Component {

  constructor() {
    super();
    this.state = {
      capacity: 'EC2',
      workload: 'web-service'
    };

    this.onValChange = this.onValChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }

  onValChange = (event) => {
    this.setState({
      capacity: event.target.value
    });
  }

  onSubmitForm = (event) => {
    event.preventDefault();
    console.log(this.state.capacity);
    console.log(this.state.workload);
  }

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmitForm}>

              <label>
                <input
                  type="radio"
                  value="EC2"
                  checked={this.state.capacity === "EC2"}
                  onChange={this.onValChange}/>
                    <span>EC2</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Fargate"
                  checked={this.state.capacity === "Fargate"}
                  onChange={this.onValChange}/>
                    <span>Fargate</span>
              </label>

              <label>
                <input
                  type="radio"
                  value="Server"
                  checked={this.state.capacity === "Server"}
                  onChange={this.onValChange}/>
                    <span>Server</span>
              </label>

 
              <label>
                <input
                  type="checkbox"
                  value="web-service"
                  checked={this.state.workload === "web-service"}
                  onChange={this.onValChange}/>
                    <span>Web Service</span>
              </label>

              <label>
                <input
                  type="checkbox"
                  value="batch-job"
                  checked={this.state.workload === "batch-job"}
                  onChange={this.onValChange}/>
                    <span>Batch Job</span>
              </label>

              <label>
                <input
                  type="checkbox"
                  value="worker"
                  checked={this.state.workload === "worker"}
                  onChange={this.onValChange}/>
                    <span>Worker</span>
              </label>

              <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;
reactjs
1 Answers

You have to maintain three separate variables for the checkboxes in the state. You can only click one radio button, but you can have one or two or three of the checkboxes clicked. Here's the code for your reference.

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      capacity: "EC2",
      isWebService: false,
      isBatchJob: false,
      isWorker: false
    };
  }

  onValChange = (event) => {
    this.setState({
      capacity: 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}>
          <label>
            <input
              type="radio"
              value="EC2"
              checked={this.state.capacity === "EC2"}
              onChange={this.onValChange}
            />
            <span>EC2</span>
          </label>

          <label>
            <input
              type="radio"
              value="Fargate"
              checked={this.state.capacity === "Fargate"}
              onChange={this.onValChange}
            />
            <span>Fargate</span>
          </label>

          <label>
            <input
              type="radio"
              value="Server"
              checked={this.state.capacity === "Server"}
              onChange={this.onValChange}
            />
            <span>Server</span>
          </label>

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

          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;
user_125289740
Related