title: toggle background color of selected list item react.js
body: <p>what i want to do it when i click on one of the list items i want the class selected to be applied and when i click again i want it to be removed, so basically a toggle function, but it happens to all 3 list items, so if i click on one, all get selected, but i want it so only one can be selected at a time</p>
  
  <pre><code>import React from 'react';
  
  
  
  export default class Order extends React.Component {
  constructor() {
      super()
      this.state = {
        selected: false,
      };
    }
  
   toggleChoice() {
      const selected = !this.state.selected;
      this.setState({selected});
    }
    render() {
      const { selected } = this.state;
      const selectedCircle = selected ? " selected":"";
      return (
          &lt;div class="container" id="order-layout"&gt;
              &lt;div class="row"&gt;
  
                      &lt;div class="card-panel white"&gt;
                        &lt;div class="center"&gt;
                          &lt;h5&gt;Your Order&lt;/h5&gt;
                          &lt;p class="margin-top-30 bold"&gt;Choose Pizza size in cm&lt;/p&gt;
                          &lt;ul class="margin-top-30"&gt;
                              &lt;li &gt;&lt;div onClick={this.toggleChoice.bind(this)} class={"circle-20 hovered-circle" + selectedCircle}&gt;20&lt;/div&gt;&lt;/li&gt;
                              &lt;li &gt;&lt;div onClick={this.toggleChoice.bind(this)} class={"circle-30 hovered-circle" + selectedCircle}&gt;30&lt;/div&gt;&lt;/li&gt;
                              &lt;li &gt;&lt;div onClick={this.toggleChoice.bind(this)} class={"circle-40 hovered-circle" + selectedCircle}&gt;40&lt;/div&gt;&lt;/li&gt;
                          &lt;/ul&gt; 
  
                        &lt;/div&gt;
                      &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>