title: How to make button 1 onClick to enable disabled button 2 in React?
body: <p>I have 2 levels of buttons and level 2 buttons are disabled while some button on level 1 is clicked, and level 2 option is conditional, it depends on level 1.</p>
  <p>However when button from level 1 is clicked I am not sure how can I enable the buttons on level 2 which depend on the button clicked on level 1.</p>
  <p>I tried something like <code>getElementById</code> function but that doesn't work(it does change button style like it is enabled, but still is not clickable and won't even enable those on level 3). Also tried <code>setAttribute</code>, but I probably need something like state or ref which confuses me in this case, since I just started learning React and JS.</p>
  <pre><code>import React, {Component} from 'react'
  
  
  class Example extends Component {
      constructor(props) {
          super(props);
          this.someFunction=this.someFunction.bind(this);
      }
     
      someFunction(e){
          e.stopPropagation()
          var element= document.getElementById(Number.parseInt(e.target.id)+1)
          console.log(&quot;Clicked by &quot; + e.target.id) // even if clicking 2 after change this won't print Clicked by 2
         element.disabled=0 //if not null
  
      }
  
      render() {
      return &lt;div className=&quot;example&quot;&gt;
  
          &lt;button id=&quot;1&quot; onClick={this.someFunction}&gt;Level 1&lt;/button&gt; {/* this is just example i have, db list of variations and logic*/}
          &lt;button disabled={true} onClick={this.someFunction} id=&quot;2&quot;&gt;Level 2&lt;/button&gt;
          &lt;button disabled={true} onClick={this.someFunction} id=&quot;3&quot;&gt;Level 3&lt;/button&gt;
      &lt;/div&gt;
  
  
      }
  
  
  }
  export default Example
  </code></pre>
  <p>Here is an example of what I think.</p>
  <p>In the scheme below I draw what I want to achieve. Basically buttons in level 1 don't have parents, those in level 2 have some parent from level 1 and so on until the last on which I will generate something.
  The links between level 1 and level 2 depict which buttons should be enabled in level 2 if that button is clicked in level 1.</p>
  <p>This is not important as the real problem is that for some reason in React I can enable the buttons in level 2 which have the link but they are becoming 'unclickable'.</p>
  <p><a href="https://i.stack.imgur.com/ZbsCQ.png" rel="nofollow noreferrer">Scheme</a></p>