title: ReactJs : how do I set up a simple conditional visible-hidden rule?
body: <p>I have a collection of components with and add and remove button.</p>
  
  <p>I'd like to hide/grey out these buttons when the collection is too small and too big.</p>
  
  <p>This bit of code picked up from <a href="https://stackoverflow.com/a/42937296/4770754">here</a> seems like it would do the job
  :</p>
  
  <pre><code>render() {
      return (
          { this.props.isGreaterThanOne &amp;&amp; (
              &lt;div&gt;
                  this only shows up if the checkboxField Field is checked
              &lt;/div&gt;
          ) }
      );
  }
  </code></pre>
  
  <p>And I could simply update a boolean within my increment and decrement functions like so :</p>
  
  <pre><code>let isGreaterThanOne = true;
  this.setState({
      collection: this.state.collection.splice(this.state.collection, this.state.collection.length - 1),
  });
  if (this.state.collection.length &gt; 1) {
      isGreaterThanOne = true;
  } else {
      isGreaterThanOne = false;
  }
  
      return { isGreaterThanOne };
  </code></pre>
  
  <p>Now I'm consious the above is probably as garbage as it gets. All suggestions welcome. I think the variable should be decalred globally but I don't know how to do it.</p>
  
  <p>Basically I just want there to be a variable that is set to false whenever the remove line should be hid (only one line left) and true when there are two lines or more.</p>
  
  <p>Same deal with another variable traking when the collection reaches 15 or something.</p>
  
  <p>Right now even if I just declare isGreaterThanOne as a global const equal to true the div doesn't show up.</p>
  
  <p>As per @Denialos 's demand here is my full component (with his suggestions) :</p>
  
  <pre><code>/* ************************************* */
  /* ********       IMPORTS       ******** */
  /* ************************************* */
  import React, { Component } from 'react';
  import UUID from 'node-uuid';
  import { Card, CardBlock, Button, InputGroup, Input } from 'reactstrap';
  import ProviderInfos from '../ProviderInfos/ProviderInfos';
  
  /* ************************************* */
  /* ********      VARIABLES      ******** */
  /* ************************************* */
  
  /* ************************************* */
  /* ********      COMPONENT      ******** */
  /* ************************************* */
  export default class PretzelStandComponent extends Component {
  
      constructor(props) {
          super(props);
          this.state = { 
              inputPretzel: [],
              isGreaterThanOne: true
              };
          this.incrementPretzel = this.incrementPretzel.bind(this);
          this.decrementPretzel = this.decrementPretzel.bind(this);
      }
  
      componentDidMount() {
          this.incrementPretzel();
      }
  
      incrementPretzel() {
          const uuid = require('uuid/v1');
          uuid();
          const inputPretzel = this.state.inputPretzel;
          if (this.state.inputPretzel.length &gt; 1) {
              this.state.isGreaterThanOne = true;
          } else {
              this.state.isGreaterThanOne = false;
          }
          this.setState({
              inputPretzel: inputPretzel.concat(&lt;InputGroup&gt;
                  &lt;Input placeholder="Pretzel" key={uuid} /&gt;&lt;ProviderInfos /&gt;&lt;/InputGroup&gt;),
          });
      }
  
      decrementPretzel() {
          if (this.state.inputPretzel.length &gt; 1) {
              this.state.isGreaterThanOne = true;
          } else {
              this.state.isGreaterThanOne = false;
          }
          this.setState({
              inputPretzel: this.state.inputPretzel.splice(this.state.inputPretzel, this.state.inputPretzel.length - 1),
          });
      }
  
      render() {
          return (
              &lt;Card&gt;
                  &lt;CardBlock className="main-table"&gt;
                      &lt;fieldset&gt;
                          &lt;legend&gt;Pretzels&lt;/legend&gt;
                          {this.state.inputPretzel}
                          &lt;button onClick={this.incrementPretzel}&gt;Ajouter un Pretzel&lt;/button&gt;
                          { this.props.isGreaterThanOne &amp;&amp; (
                             &lt;div&gt;
                                 &lt;button onClick={this.decrementPretzel}&gt;Enlever un Pretzel&lt;/button&gt;
                             &lt;/div&gt;
                           ) }
                      &lt;/fieldset&gt;
                      &lt;Button color="secondary"&gt;Options&lt;/Button&gt;{' '}
                      &lt;Button id="btn"&gt;Exécuter&lt;/Button&gt;
                  &lt;/CardBlock&gt;
              &lt;/Card&gt;
          );
      }
  }
  </code></pre>