title: Show/Hide a element by condition in a array
body: <p>I got a component that is render in a array. This component just show 2 buttons and a input text. This buttons increment/decrease 1 item (see the image). I have some data coming from a API and one of this item limit the purchase. I need to hide the increment button  when the limit  is higher and show when limit is lower. I can do this, but my problem is that just occur with one button and not with all the buttons in array  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//My Buttons increment/decrease component
  import React, { Component } from 'react';
  import api from '../../components/Util/api.js';//para requisições
  import './ChooseQuantity.css';
  
  var cart = {};
  var total = {};
  var events = {};
  var tickets = [];
  var quantity = [];
  class ChooseQuantity extends Component {
      constructor(props) {
          super(props);
          this.state = {
              qtd: 0,
              showAddButton: true,
              showRemoveButton: true,
          }
      }
      addItem() {
          // quantity = [];
          localStorage.removeItem('quantity');
  
          this.setState({ showRemoveButton: false });
          this.setState({ qtd: this.state.qtd += 1 });
          quantity.push(parseInt(this.state.qtd));
          localStorage.setItem('quantity', quantity.length);
  
          console.log(this.state.showAddButton);
          
          // if (tickets.indexOf(this.props.tickets)) {
          //     tickets.push(this.props.tickets);
          // }
  
          // var price = this.props.price * this.state.qtd;
          // total = { price: price, quantity: this.state.qtd };
          // events = {
          //     banner_app: this.props.banner_app,
          //     installments: this.props.installments,
          //     max_purchase: this.props.max_purchase,
          //     name: this.props.event_name,
          //     tickets: tickets,
          //     unique_number: this.props.unique_number
          // };
          // cart = { events: events, total: total };
          // localStorage.setItem('cart', JSON.stringify(cart));
          // console.log(localStorage.getItem('quantity'));
          if (localStorage.getItem('quantity') &gt;= this.props.max_purchase) {
              this.setState({ showAddButton: false });
          }
  
      }
      removeItem() {
          if (this.state.qtd &gt; 0) {
              this.setState({ qtd: this.state.qtd -= 1 });
          }
          
          if (this.state.qtd === 0) {
              quantity = [];
              quantity.pop();
              quantity.length = '';
              localStorage.removeItem('quantity');
              // this.setState({ showRemoveButton: true });
          } else{
              // this.setState({ showAddButton: true });
              localStorage.setItem('qtd', this.state.qtd);
              quantity.push(parseInt(this.state.qtd));
              // quantity = JSON.parse(localStorage.getItem('quantity'));
              localStorage.setItem('quantity', this.state.qtd);
          }
  
          console.log(localStorage.getItem('quantity'));
          if(localStorage.getItem('quantity') &gt;= this.props.max_purchase){
              // this.setState({ showRemoveButton: false });
          }
  
          
  
          // cart = JSON.parse(localStorage.getItem('cart'));
          
          // if (cart.events.tickets.indexOf(this.props.tickets)) {
          //     localStorage.removeItem('cart');
          //     console.log('retirou');
          //     var price = this.props.price * this.state.qtd;
              
          //     total = { price: price, quantity: this.state.qtd };
          //     events = {
          //         banner_app: this.props.banner_app,
          //         installments: this.props.installments,
          //         max_purchase: this.props.max_purchase,
          //         name: this.props.event_name,
          //         tickets: tickets
          //     };
          //     cart = { events: events, total: total };
          //     localStorage.setItem('cart', JSON.stringify(cart));
          //     console.log(cart.events.tickets.indexOf(this.props.tickets));
          // }
          // console.log(cart.events.tickets);
          console.log(this.state.showAddButton);
      }
      componentDidMount() {
          //     const { id } = this.props.event_id;
          //     api.get(`event/${this.props.event_id}`)
          //         .then(res =&gt; {
  
          //             const event = res.data.data;
          //             console.log(event);
          //             this.setState({ event });
          //             this.setState({ dates: event.dates })
          //             this.state.dates.map((date, i) =&gt;
          //                 this.setState({ tickets: this.state.dates[i].tickets})
          //             )
          //             this.state.tickets.map((ticket, i) =&gt;
          //                 this.setState({ lots: ticket.lot})
          //             )
          //         })
      }
  
      render() {
          return (
              &lt;div&gt;
                  {
                      !this.state.showRemoveButton ?
                          &lt;button className="minus" onClick={() =&gt; this.removeItem()}&gt;
                              &lt;i className="fas fa-minus"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                          :
                          &lt;div className="space-button"&gt;&lt;/div&gt;
                  }
                  &lt;input className="qtd" type="text" value={this.state.qtd} name='qtd' onChange={() =&gt; this.handleChange()} readOnly /&gt;
                  {
                      this.state.showAddButton ?
                          &lt;button className='plus' onClick={() =&gt; this.addItem()} &gt;
                              &lt;i className="fas fa-plus"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                          : 
                          &lt;div className="space-button"&gt;&lt;/div&gt;
                  }
              &lt;/div&gt;
          )
      }
  }
  
  export default ChooseQuantity;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import api from '../../components/Util/api.js';//para requisições
  import Header from '../../components/Header/Header';
  import { Link } from 'react-router-dom';
  
  import './Event.css';
  import '../../components/Css/App.css';
  import ChooseQuantity from '../../components/ChooseQuantity/ChooseQuantity.js';
  
  class Event extends Component {
      constructor(props){
          super(props);
          this.state = {
              event: {},
              dates: [],
              tickets: [],
              choose_quantity: 0,
              qtd: 0,
          }
      }
              
      componentDidMount() {
          const { id } = this.props.match.params;
          api.get(`event/${id}`)
              .then(res =&gt; {
                  const event = res.data.data;
                  this.setState({ event });
                  console.log(event);
                  
                  this.setState({ dates: event.dates })
                  this.state.dates.map((date, i) =&gt;
                      this.setState({ tickets: this.state.dates[i].tickets})
                  )
                  this.state.tickets.map((ticket, i) =&gt;
                      this.setState({ lots: ticket.lot})
                  )
              })
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Header Title={this.state.event.name} ToPage="/" /&gt;
                  &lt;div className="container-fluid padding-15 event"&gt;
                      &lt;div className="mt-5"&gt;
                          &lt;img className="card-img-top" src={this.state.event.banner_app} alt={this.state.event.name} /&gt;
                          &lt;div className="row no-margin mb-3"&gt;
                              &lt;div className="col-8 no-padding"&gt;
                                  &lt;h1 className="event-title"&gt;{this.state.event.name}&lt;/h1&gt;
                                  &lt;h1 className="event-place"&gt;
                                      &lt;i className="fas fa-pin"&gt;&lt;/i&gt;
                                      {this.state.event.place}
                                  &lt;/h1&gt;
                              &lt;/div&gt;
                              &lt;div className="col-4 event-date-col align-items"&gt;
                                  &lt;span className="event-date" id="event-date"&gt;
                                  &lt;/span&gt;
                              { this.state.dates.map((date, i) =&gt;
                                  &lt;span className="event-date" key={i}&gt;
                                      { date.date }
                                  &lt;/span&gt;
                              )}
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          {
                              this.state.tickets.map((ticket, i) =&gt; (
                                  &lt;div key={i}&gt;
                                      &lt;div className="row"&gt;
                                          &lt;div className="col"&gt;
                                              &lt;h3 className="ticket-name"&gt;{ ticket.name }&lt;/h3&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      {ticket.lot.map((lot, j) =&gt; 
                                          &lt;div className="row" key={i}&gt;
                                              &lt;div className="col-8"&gt;
                                                  &lt;h5 className="lot-name"&gt;{ lot.name }&lt;/h5&gt;
                                                  &lt;h6 className="lot-price"&gt;
                                                      R$ { lot.price.replace('.', ',') } &lt;br /&gt;
                                                      &lt;small&gt;(R$ { lot.price.replace('.', ',') } + R$ { lot.price_tax.replace('.', ',') })&lt;/small&gt;
                                                  &lt;/h6&gt;
                                              &lt;/div&gt;
                                              &lt;div className="col-4"&gt;
                                                  &lt;ChooseQuantity event_id={this.state.event.id} unique_number={ lot.unique_number } price={ lot.price } banner_app={ this.state.event.banner_app } max_purchase={this.state.event.max_purchase} event_name={this.state.event.name} tickets={ ticket.lot } /&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                      )}
                                      &lt;hr /&gt;
                                  &lt;/div&gt;
                                  )
                              )
                          }
  
                          &lt;div className="row mt-5"&gt;
                              &lt;div className="col"&gt;
                                  &lt;h6 className="text-default"&gt;Descrição&lt;/h6&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="col" dangerouslySetInnerHTML={{__html:this.state.event.description}}&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row cart-footer"&gt;
                      &lt;div className="col col-price"&gt;
                          &lt;h6&gt;3 INGRESSOS&lt;/h6&gt;
                          &lt;h5&gt;R$ 16,00&lt;/h5&gt;
                      &lt;/div&gt;
                      &lt;Link className="col col-purchase" to="/"&gt;
                          Comprar
                      &lt;/Link&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default Event;</code></pre>
  </div>
  </div>
  </p>
  
  
  
  <p><a href="https://i.stack.imgur.com/Fp0ma.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fp0ma.png" alt="enter image description here"></a></p>