Breaking News: Grepper is joining You.com. Read the official announcement!

how to use radio buttons in react class-based components

Add Answer

talhadev answered on May 23, 2020 Popularity 10/10 Helpfulness 3/10

answer how to use radio buttons in react class-based components

related Radio button in react

related reactjs radio button onchange

related react input radio button

how to use radio buttons in react class-based components

Comment

class App extends React.Component {
  
  setGender(event) {
    console.log(event.target.value);
  }
  
  render() {
    return ( 
      <div onChange={this.setGender.bind(this)}>
        <input type="radio" value="MALE" name="gender"/> Male
        <input type="radio" value="FEMALE" name="gender"/> Female
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: components javascript

Link to this answer
Share Copy Link

Contributed on Nov 29 2021

talhadev

0 Answers Avg Quality 2/10

Closely Related Answers

Radio button in react

Comment

  const [gender,setgender]=useState()

 const handlegender=(e)=>{
    setgender(e.target.value)
  }
 

 
 <form>
        
        <div>
          <label>Gender</label>
          <input type="radio" name="gender" value="male" onChange={handlegender} />
          Male
          <input type="radio" name="gender" value="Female" onChange={handlegender}/>
          Female
        </div>
      </form>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 07 2022

Developer FS

0 Answers Avg Quality 2/10

reactjs radio button onchange

Comments(1)

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleChange = e => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    });
  };

  render() {
    return (
      <div className="radio-buttons">
        Windows
        <input
          id="windows"
          value="windows"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
        Mac
        <input
          id="mac"
          value="mac"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
        Linux
        <input
          id="linux"
          value="linux"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 23 2020

0 Answers Avg Quality 2/10

react input radio button

Comment

function App() {
  return (
    <div>
      <label className="radio">
  <input name="radio" type="radio" checked/>
  <span>Awesome</span>
</label>
<label className="radio">
  <input name="radio" type="radio" />
  <span>Cool</span>
</label>
    </div>
  );
}

export default App;

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: input inpu

Link to this answer
Share Copy Link

Contributed on Jul 22 2022

Javasper

0 Answers Avg Quality 2/10

how to use radio buttons in react class-based components

Contents

More Related Answers

how to use radio buttons in react class-based components

Closely Related Answers

Radio button in react

reactjs radio button onchange

react input radio button

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.