title: Passing variable value as a condition in if statement with React.js
body: <p>I'm a student and I'm trying to make a summary of a cart for an e-commerce site with React.js for a homework assignment.
  I need to set a shipping cost (there are two options for the shipping cost: the first is <em>free</em>, the second is <em>$20</em>) based on the selected radio button, but I'm not able to do it. I think that the right way can be done with an if statement, but I'm not sure. Can someone guide me on how to achieve this? </p>
  
  <p>This is the code of the page where the buttons are present:</p>
  
  <pre><code>        import React, {Component} from 'react';
          import {Col, Row, Button, Form, Card} from 'react-bootstrap';
          import {Link} from 'react-router-dom';
          import '../styles/shopping.css';
          import Header from '../components/header';
          import Foot from "../components/foot";
          import Summary from '../components/summary';
  
          class Shipping extends Component{    
              constructor(props) {
                  super(props);
                  this.state = {
                      activeIndex: ''
                  };        
                  this.radioButtons = [            
                      {text: 'Free Shipping \n\r Between 2 - 5 working days'},
                      {text: 'Next Day Delivery - $20 \n\r 24 hours from checkout'} 
                      ]
                  }      
                  updateRadioGroup(i) {
                    this.setState({activeIndex: i})
                  }        
              render(){
                  let { activeIndex } = this.state;     
                  return(
                                  &lt;Row&gt;
                                      &lt;Col xs={6} id="ship-sx"&gt;
                                      {
                                      this.radioButtons.map((element,i ) =&gt; (
                                          &lt;Card className="btn-shipping" class="boxClickCss" key={i} className={activeIndex === i ? 'btn-shipping actv' : 'btn-shipping'}&gt;
                                              &lt;Row&gt;
                                                  &lt;Col xs={2} className="center-radio"&gt;
                                                      &lt;label className="container-btn-radio"&gt;
                                                          &lt;input required type="radio" name="ship" onClick={() =&gt; this.updateRadioGroup(i)}/&gt;
                                                          &lt;span className="checkradio"/&gt;
                                                      &lt;/label&gt;
                                                  &lt;/Col&gt;                                        
                                                  &lt;Col xs={10}&gt;
                                                      &lt;div style={{maxWidth:"55%"}}&gt;{element.text}&lt;/div&gt;
                                                  &lt;/Col&gt;
                                              &lt;/Row&gt;
                                          &lt;/Card&gt;
                                      ))
                                      }
                                      &lt;/Col&gt;
                                      &lt;Col xs={12} md={4}&gt;
                                          &lt;Summary/&gt;
                                      &lt;/Col&gt;
                                  &lt;/Row&gt;
  
              )
          }
      }
      export default Shipping;
  </code></pre>
  
  <p>And this is the component included in the page where the shipping price must be visualized:</p>
  
  <pre><code>import React from 'react';
  import {Col, Row, Accordion, Dropdown, Button} from 'react-bootstrap';
  import Coupon from "./coupon";
  import SummaryProd from "./summaryProd";
  import '../styles/summary.css';
  
  function somma() {
      var z = (localStorage.getItem('price') +20 +20);
      return z;
  }
  var risultato = somma();
  
  export const  showProduct=()=&gt;{        
      localStorage.getItem('name');
      localStorage.getItem('price');
      localStorage.getItem('description');
      localStorage.getItem('img');
  }
  export const Summary = () =&gt; (             
      (localStorage.getItem('id') !== null) ? ( 
          &lt;&gt;
          &lt;Row&gt;
              &lt;Col id="summary-col"&gt;
                  &lt;div&gt;
                      &lt;h3&gt;Summary&lt;/h3&gt;
                          &lt;hr className='row-shopping'/&gt;
                      &lt;/div&gt;                                 
                      &lt;SummaryProd/&gt;
                      &lt;Coupon/&gt;
                      &lt;hr className='row-shopping'/&gt;
                      &lt;div&gt;
                      &lt;Accordion defaultActiveKey="0"&gt;
                          &lt;Accordion.Toggle id="btn-voucher" as={Button} variant="link" eventKey="1" split&gt;
                              &lt;span&gt;HAVE A VOUCHER?&lt;/span&gt;&lt;Dropdown.Toggle id="voucher-arrow"/&gt;
                          &lt;/Accordion.Toggle&gt;                        
                          &lt;Accordion.Collapse eventKey="1"&gt;
                          &lt;input/&gt;
                          &lt;/Accordion.Collapse&gt;
                      &lt;/Accordion&gt;
                      &lt;/div&gt;
                      &lt;hr className='row-shopping'/&gt;
                      &lt;div className="summary-details"&gt;
                          &lt;span&gt;
                              SUBTOTAL
                          &lt;/span&gt;
                          &lt;span&gt;
                              ${localStorage.getItem('price')}
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className="summary-details"&gt;
                          &lt;span&gt;
                              SHIPPING
                          &lt;/span&gt;
                          &lt;span&gt;
                              {/* SHIPPiNG COST */}
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div className="summary-details"&gt;
                          &lt;span&gt;
                              TAXES
                          &lt;/span&gt;
                          &lt;span&gt;
                              $20
                          &lt;/span&gt;
                      &lt;/div&gt;
                      &lt;hr className='row-shopping'/&gt;
                      &lt;div className="summary-details"&gt;
                          &lt;span&gt;
                              TOTAL
                          &lt;/span&gt;
  
                          &lt;span&gt;
  
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              &lt;/&gt;
          ):(
          &lt;Row style={{height: '50vh'}}&gt;
              &lt;Col id="summary-col"&gt;
                  &lt;div &gt;
                      &lt;h3&gt;Summary&lt;/h3&gt;
                      &lt;hr className='row-shopping'/&gt;
                      &lt;span&gt;Your cart is empty!&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/Col&gt;
          &lt;/Row&gt;           
      )               
  )
  
  export default Summary;
  </code></pre>