title: Conditionally rendering contents of a button
body: <p>I am making a memory game, <a href="https://codesandbox.io/s/ly4rzzvjyl" rel="nofollow noreferrer">CodeSandbox</a>, and I am trying to accomplish the following: </p>
  
  <ol>
  <li>Get the cards to be dealt initially face down (icon hidden so to speak)</li>
  <li>onClick, the icon on the card that is clicked is revealed, none of the others is revealed</li>
  <li>When the second card is clicked that icon is revealed, if they match the cards are removed anyway (that part works) but if they don't, the icons are hidden again.</li>
  </ol>
  
  <p>I tried adding a "buttonMask" class in the parent div but it overrides my existing class. I tried display: none in the parent div also, no luck.  </p>
  
  <p>Other attempts included adding a state property to the Card.js component this.state.isHidden: true and trying to toggle the visibility. I read the docs, <a href="https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e" rel="nofollow noreferrer">This</a>, <a href="https://stackoverflow.com/questions/46876244/best-way-to-conditional-render-react-components-and-keep-it-dry">SO</a>, and <a href="https://eddyerburgh.me/toggle-visibility-with-react" rel="nofollow noreferrer">eddyerburgh</a>. I'm stuck on this condition render, everything else works great, this piece got me</p>
  
  <p>This is my conditional for dealing the cards</p>
  
  <pre><code>class Cards extends Component {
    constructor(props) {
      super(props);
    }
    render() {
      const card = (
        &lt;div style={sty}&gt;
          {this.props.cardTypes ? (
            this.props.cardTypes.map((item, index) =&gt; {
              return (
                &lt;button style={cardStyle} value={item} key={index}&gt;
                  {" "}
                  {item}{" "}
                &lt;/button&gt;
             );
           })
          ) : (
            &lt;div&gt; No Cards &lt;/div&gt;
          )}
        &lt;/div&gt;
      );
      return &lt;Card card={card} removeMatches={this.props.removeMatches} 
     /&gt;;
   }
  </code></pre>
  
  <p>Originally, when I first tried this, I was passing state to all the cards, not just individual cards, that was why I was not able to toggle them individually. </p>
  
  <p>This was the original render in Cards.js</p>
  
  <pre><code>if (this.state.hidden) {
      return (
        &lt;button
          key={card + index}
          style={btn}
          onClick={this.revealIcon}
          id={card}
        &gt;
          &lt;div style={btnMask}&gt;{card}&lt;/div&gt;
        &lt;/button&gt;
      );
    } else {
      return (
        &lt;button
          key={card + index}
          style={btn}
          onClick={this.revealIcon}
          id={card}
        &gt;
          &lt;div&gt;{card}&lt;/div&gt;
        &lt;/button&gt;
      );
    }
  </code></pre>