How to make button 1 onClick to enable disabled button 2 in React?

user_14737969 0
Viewed 1029

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.

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.

I tried something like getElementById 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 setAttribute, but I probably need something like state or ref which confuses me in this case, since I just started learning React and JS.

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("Clicked by " + e.target.id) // even if clicking 2 after change this won't print Clicked by 2
       element.disabled=0 //if not null

    }

    render() {
    return <div className="example">

        <button id="1" onClick={this.someFunction}>Level 1</button> {/* this is just example i have, db list of variations and logic*/}
        <button disabled={true} onClick={this.someFunction} id="2">Level 2</button>
        <button disabled={true} onClick={this.someFunction} id="3">Level 3</button>
    </div>


    }


}
export default Example

Here is an example of what I think.

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.

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'.

Scheme

reactjs
2 Answers

You will need to use state so each element, or button, can render disabled or enabled based on the state values. If we have a level state value, each button can respect that value, as well as modify that value.

Here's a simple version of your buttons with the level state:

const Example = () => {
  const [level, setLevel] = useState(0);

  return (
    <div className="example">
      <button level={1} onClick={() => setLevel(1)} disabled={level !== 0}>
        Level 1
      </button>
      <button level={2} onClick={() => setLevel(2)} disabled={level !== 1}>
        Level 2
      </button>
      <button level={3} onClick={() => setLevel(3)} disabled={level !== 2}>
        Level 3
      </button>
      <div>Level: {level}</div>
    </div>
  );
};

I added a div at the end just so you can tell what the level is at any given point. Oh and you'll need to import useState from react:

import React, {useState} from 'react'
user_7957050

You can add a state that is called isDisabled and set up the logic of it according to the other level of buttons. On the button itself, you'll use that state for the logic:

 <button disabled={this.state.isDisabled} onClick={this.someFunction} id="n">Level n</button>
user_44299750
Related