title: React radio buttons update state
body: <p>I have a problem with implementing the radio buttons component in my React App.
  I have a json file, with different options, like this: </p>
  
  <pre><code>[ 
  "food": [
     {
      "id": 1,
      "name": "Pizza",
      "options": [
          {
              "id": 11,
              "name": "Margherita",
          },
          {
              "id": 12,
              "name": "Pepperoni",
          },
          {
              "id": 13,
              "name": "Prosciutto",
          },
          {
              "id": 14,
              "name": "Prataiolo",
          }
      ]
    },
    {
      "id": 2,
      "name": "Size",
      "options": [
          {
              "id": 21,
              "name": "S",
          },
          {
              "id": 22,
              "name": "M",
          },
          {
              "id": 23,
              "name": "L",
          },
          {
              "id": 24,
              "name": "XL",
          },
      ]
   }
  </code></pre>
  
  <p>I want to make a radio buttons, for the user to choose the pizza they want and put it in the component state. </p>
  
  <p>How can I make this work with two groups of radio buttons?</p>
  
  <pre><code>class PizzaList extends Component{
    constructor(props){
    super(props);
      this.state = {
          pizza: '',
          size: ''
       }
  
    render(){
  
    return(
      {this.props.food.map(option =&gt; {
        &lt;h2 key={option.id}&gt;{option.name}&lt;/h2&gt;
          {option.options.map(value =&gt; {
            &lt;input 
              type='radio'
              value='value.id'
             /&gt;
          })
       })}
     )
   }
  </code></pre>