title: Adding Disabled Attribute to dynamically created Button In React
body: <p>I have a QWERTY keyboard rendered dynamically through a component as Bootstrap buttons through bootstrap-react.  They do not have IDs I'm trying to NOT use IDs as a crutch in React. </p>
  
  <p>When one of the letters is clicked it fires off an onClick event through props, back to my App.js. This works fine. I want that button to then be disabled.  Since it doesn't have an ID and I can't do a jQuery class&amp; data- value selector because: React.</p>
  
  <p>How can I change that buttons property to Disabled (Disabled is an allowable HTML property in react).</p>
  
  <pre><code>import React from "react";
  import {Button} from 'react-bootstrap';
  
  
  const keyboard = props =&gt; {
  return (
      &lt;div&gt;
          {props.keyboard.keys.map((item,index) =&gt; (
             &lt;Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()}&gt; {item.toUpperCase()}
              &lt;/Button&gt;
          ))}
      &lt;/div&gt;
  )
  }
  
  export default keyboard;
  </code></pre>
  
  <p>My click event is so far working as intended.  Ideally I'd like the Button to change to: </p>
  
  <p><code>&lt;Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} value={item.toUpperCase()} disabled&gt; {item.toUpperCase()}&lt;/Button&gt;</code></p>
  
  <p>after the click event. </p>
  
  <p>The keyboard is referenced from my App.js as follows:</p>
  
  <pre><code>            &lt;Panel header="Keyboard:"&gt;
                  &lt;Keyboard keyboard={this.keyboard.row1} click={(event) =&gt; this.keyboardClickHandler(event)}
                  /&gt;
                  &lt;Keyboard keyboard={this.keyboard.row2} click={(event) =&gt; this.keyboardClickHandler(event)}/&gt;
                  &lt;Keyboard keyboard={this.keyboard.row3} click={(event) =&gt; this.keyboardClickHandler(event)}/&gt;
                  &lt;div id="messages"&gt;{this.messages}&lt;/div&gt;
              &lt;/Panel&gt;
  </code></pre>
  
  <p>and the click handler console.logs the values as expected:</p>
  
  <pre><code>keyboardClickHandler = (event) =&gt; {
  console.log(event.target.value)
  }
  </code></pre>
  
  <p>*** Edit:</p>
  
  <p>I kinda hacked it in there, because I was having trouble passing event data back through the super component.  I reverted back to a simple component, and added an array of the keys in state holding boolean values, and a check inside the component to see if it should be disabled.</p>
  
  <pre><code>        status: {
              q: false,
              w: false,
              e: false,
              r: false,
              t: false,
              y: false,
              u: false,
              i: false,
              o: false,
              p: false
  </code></pre>
  
  <p>And the component:</p>
  
  <pre><code>import React from "react";
  import {Button} from 'react-bootstrap';
  
  
  const keyboard = props =&gt; {
  
  return (
      &lt;div&gt;
          {props.keyboard.keys.map((item,index) =&gt; {
              let status = props.keyboard.status[item]
              return (
             &lt;Button bsStyle={props.keyboard.style} bsSize="large" onClick={props.click} key={index} disabled={status} value={item}&gt; {item.toUpperCase()}
              &lt;/Button&gt;
          )
      }
      )
  }
      &lt;/div&gt;
  )
  }
  
  export default keyboard;
  </code></pre>