How to use radio buttons in ReactJS

Question

I am new to ReactJS  sorry if this sounds off   I have a component that creates several table rows according to the received data   Each cell within the column has a radio checkbox  Hence the user can select one site name and one address from the existing rows  The selection shall be shown in the footer  And thats where I am stuck   var SearchResult   React createClass      render  function           var resultRows   this props data map function result              return                   lt tbody gt                       lt tr gt                           lt td gt  lt input type  radio  name  site name  value  result SITE NAME  gt  result SITE NAME  lt  input gt  lt  td gt                           lt td gt  lt input type  radio  name  address  value  result ADDRESS  gt  result ADDRESS  lt  input gt  lt  td gt                       lt  tr gt                  lt  tbody gt                                  return               lt table className  table  gt                  lt thead gt                      lt tr gt                          lt th gt Name lt  th gt                          lt th gt Address lt  th gt                      lt  tr gt                  lt  thead gt                   resultRows                  lt tfoot gt                      lt tr gt                          lt td gt chosen site name       lt  td gt                          lt td gt chosen address        lt  td gt                      lt  tr gt                  lt  tfoot gt              lt  table gt                       In jQuery I could do something like    input name site name  checked   val   to get the selection of one radio checkbox type and insert it into the first footer cell     But surely there must be a Reactjs way  which I am totally missing  Many Thanks

User · Answer

Bootstrap guys  we do it like this    export default function RadioButton   onChange  option          const handleChange   event   gt            onChange event target value             return            lt  gt               lt div className  custom-control custom-radio  gt                   lt input                     type  radio                      id   option option                       name  customRadio                      className  custom-control-input                      onChange   handleChange                       value     option id                         gt                       lt label                         className  custom-control-label                          htmlFor   option option                            gt                            option option                        lt  label gt               lt  div gt           lt   gt

User · Answer

I also got confused in radio  checkbox implementation  What we need is  listen change event of the radio  and then set the state  I have made small example of gender selection    x000D   x000D     x000D     A simple React component x000D      x000D  class App extends React Component   x000D    constructor params    x000D       super params   x000D          initial gender state set from props x000D       this state     x000D         gender  this props gender x000D         x000D       this setGender   this setGender bind this  x000D      x000D     x000D    setGender e    x000D      this setState   x000D        gender  e target value x000D         x000D      x000D     x000D    render     x000D      const  gender    this state x000D      return   lt div gt  x000D          Gender  x000D           lt div gt  x000D             lt input type  radio  checked  gender     male    x000D  onClick  this setGender  value  male    gt  Male x000D             lt input type  radio  checked  gender     female    x000D  onClick  this setGender  value  female     gt  Female x000D           lt  div gt  x000D             Select Gender       gender  x000D         lt  div gt   x000D      x000D    x000D   x000D     x000D     Render the above component into the div app x000D      x000D  ReactDOM render  lt App gender  male    gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Clicking a radio button should trigger an event that either    calls setState  if you only want the selection knowledge to be local  or calls a callback that has been passed in from above self props selectionChanged        In the first case  the change is state will trigger a re-render and you can do  lt td gt chosen site name  this state chosenSiteName   lt  td gt   in the second case  the source of the callback will update things to ensure that down the line  your SearchResult instance will have chosenSiteName and chosenAddress set in it s props

User · Answer

Make the radio component as dumb component and pass props to from parent   import React from  react    const Radiocomponent      value  setGender      gt        lt div onChange  setGender bind this   gt       lt input type  radio  value  MALE  name  gender  defaultChecked  value     MALE     gt  Male      lt input type  radio  value  FEMALE  name  gender  defaultChecked  value     FEMALE    gt  Female    lt  div gt      export default Radiocomponent

User · Answer

To build upon ChinKang said for his answer  I have a more dry er approach and in es6 for those interested   class RadioExample extends React Component     constructor props        super props        this state           selectedRadio   public                handleRadioChange    event    gt        this setState         selectedRadio  event currentTarget value                render         return          lt div className  radio-row  gt           lt div className  input-row  gt             lt input             type  radio              name  public              value  public              checked  this state selectedRadio      public               onChange  this handleRadioChange              gt             lt label htmlFor  public  gt Public lt  label gt           lt  div gt           lt div className  input-row  gt             lt input             type  radio              name  private              value  private              checked  this state selectedRadio      private               onChange  this handleRadioChange              gt             lt label htmlFor  private  gt Private lt  label gt           lt  div gt         lt  div gt                except this one would have a default checked value

User · Answer

Any changes to the rendering should be change via the state or props  react doc    So here I register the event of the input  and then change the state  which will then trigger the render to show on the footer   var SearchResult   React createClass     getInitialState  function          return         site            address                   onSiteChanged  function  e        this setState         site  e currentTarget value                   onAddressChanged  function  e        this setState         address  e currentTarget value                   render  function           var resultRows   this props data map function result              return                   lt tbody gt                       lt tr gt                           lt td gt  lt input type  radio  name  site name                                      value  result SITE NAME                                      checked  this state site     result SITE NAME                                      onChange  this onSiteChanged    gt  result SITE NAME  lt  td gt                           lt td gt  lt input type  radio  name  address                                      value  result ADDRESS                                       checked  this state address     result ADDRESS                                      onChange  this onAddressChanged    gt  result ADDRESS  lt  td gt                       lt  tr gt                  lt  tbody gt                          this          return               lt table className  table  gt                  lt thead gt                      lt tr gt                          lt th gt Name lt  th gt                          lt th gt Address lt  th gt                      lt  tr gt                  lt  thead gt                   resultRows                  lt tfoot gt                      lt tr gt                          lt td gt chosen site name  this state site   lt  td gt                          lt td gt chosen address  this state address   lt  td gt                      lt  tr gt                  lt  tfoot gt              lt  table gt                      jsbin

User · Answer

Based on what React Docs say      Handling Multiple Inputs    When you need to handle multiple controlled input elements  you can add a name attribute to each element and let the handler function choose what to do based on the value of event target name    For example   class App extends React Component     constructor props        super props       this state              handleChange   e   gt        const   name  value     e target       this setState          name   value                 render         return          lt div className  radio-buttons  gt          Windows          lt input           id  windows            value  windows            name  platform            type  radio            onChange  this handleChange            gt          Mac          lt input           id  mac            value  mac            name  platform            type  radio            onChange  this handleChange            gt          Linux          lt input           id  linux            value  linux            name  platform            type  radio            onChange  this handleChange            gt         lt  div gt                 Link to example  https   codesandbox io s 6l6v9p0qkr  At first  none of the radio buttons is selected so this state is an empty object  but whenever the radio button is selected this state gets a new property with the name of the input and its value  It eases then to check whether user selected any radio-button like   const isSelected   this state platform   true   false    EDIT   With version 16 7-alpha of React there is a proposal for something called hooks which will let you do this kind of stuff easier    In the example below there are two groups of radio-buttons in a functional component  Still  they have controlled inputs   function App       const  platformValue  plaftormInputProps    useRadioButtons  platform      const  genderValue  genderInputProps    useRadioButtons  gender      return        lt div gt         lt form gt           lt fieldset gt            Windows            lt input             value  windows              checked  platformValue      windows                   plaftormInputProps              gt            Mac            lt input             value  mac              checked  platformValue      mac                   plaftormInputProps              gt            Linux            lt input             value  linux              checked  platformValue      linux                   plaftormInputProps              gt           lt  fieldset gt           lt fieldset gt            Male            lt input             value  male              checked  genderValue      male                   genderInputProps              gt            Female            lt input             value  female              checked  genderValue      female                   genderInputProps              gt           lt  fieldset gt         lt  form gt       lt  div gt          function useRadioButtons name      const  value  setState    useState null      const handleChange   e   gt        setState e target value           const inputProps         name      type   radio       onChange  handleChange         return  value  inputProps       Working example   https   codesandbox io s 6l6v9p0qkr

User · Answer

Just an idea here  when it comes to radio inputs in React  I usually render all of them in a different way that was mentionned in the previous answers    If this could help anyone who needs to render plenty of radio buttons    x000D   x000D  import React from  react  x000D  import ReactDOM from  react-dom  x000D   x000D     This Component should obviously be a class if you want it to work    x000D   x000D  const RadioInputs    props    gt    x000D       x000D        Label  associated value        x000D       x000D     x000D    const inputs      Male    M      Female    F      Other    O    x000D     x000D    return   x000D       lt div gt  x000D          x000D          inputs map   text  value   i    gt    x000D      lt div key   i   gt  x000D        lt input type  radio  x000D                checked   this state gender     value    x000D         onChange      You ll need an event function here       x000D         value   value     gt   x000D             text   x000D             lt  div gt  x000D             x000D          x000D       lt  div gt  x000D      x000D    x000D   x000D  ReactDOM render  x000D     lt RadioInputs   gt   x000D    document getElementById  root   x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here is a simplest way of implementing radio buttons in react js    x000D   x000D  class App extends React Component   x000D     x000D    setGender event    x000D      console log event target value   x000D      x000D     x000D    render     x000D      return    x000D         lt div onChange  this setGender bind this   gt  x000D           lt input type  radio  value  MALE  name  gender   gt  Male x000D           lt input type  radio  value  FEMALE  name  gender   gt  Female x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  ReactDOM render  lt App  gt   document getElementById  app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D    Edited  You can use arrow function instead of binding  Replace the above code as   lt div onChange  event   gt  this setGender event   gt   For a default value use defaultChecked  like this   lt input type  radio  value  MALE  defaultChecked name  gender   gt  Male

User · Answer

import React    Component   from  react    class RadionButtons extends Component     constructor props        super props        this state              gender           use this one if you don t wanna any default value for gender       gender   male     we are using this state to store the value of the radio button and also use to display the active radio button             this handleRadioChange   this handleRadioChange bind this       we require access to the state of component so we have to bind our function            this function is called whenever you change the radion button    handleRadioChange event             set the new value of checked radion button to state using setState function which is async funtion     this setState         gender  event target value                 render         return          lt div gt           lt div check gt             lt input             type  radio              value  male     this is te value which will be picked up after radio button change             checked  this state gender      male      when this is true it show the male radio button in checked              onChange  this handleRadioChange     whenever it changes from checked to uncheck or via-versa it goes to the handleRadioChange function             gt             lt span            style    marginLeft   5px        inline style in reactjs             gt Male lt  span gt           lt  div gt           lt div check gt             lt input             type  radio              value  female              checked  this state gender      female               onChange  this handleRadioChange              gt             lt span style    marginLeft   5px     gt Female lt  span gt           lt  div gt         lt  div gt               export default RadionButtons

[html] How to use radio buttons in ReactJS?

Examples related to html

Examples related to reactjs