Change of state to make button enable from disabled postion in react js

Question

i have this finish button in my child class ... im trying to change the state of the disabling button when the finish button is clicked

{currentQuest === Quizdata.length - 1 && (
    <Button
      onClick={() => {
        this.finishQuiz();
        this.pushtoDB2();
        //  this.disableCheckLevel();
        this.props.handleDisableValue(scores); // child to parent
      }}
    >
      Finish
    </Button>
)}

i have 4 buttons to change state to false onclick of finish button to enable clicking. i have a rookie button,sutdent,intermediate,expert,master button. but i want to change the state in that order. say if I'm on rookie i can only enable student when rookie is enabled and the score >=5 then student is enabled. then intermediate is enabled if student is enabled and scores>=5 else stays in the same state. this goes until master button Issue I'm having is that mine goes from rookie to student but doesn't move any further.

this is the logic i used for disabling state

disabledRook: true,
disabledStudent: true,
disabledInterm: true,
disabledExpert: true,
disabledMaster: true,

//intiall state value

handleDisableValue = scores => {
    if (this.state.disabledRook && scores >= 5) {
      this.setState({
        disabledStudent: false
      });
    } else if (this.state.disabledStudent === false && scores >= 5) {
      this.setState({
        disabledInterm: false
      });
    } else if (this.state.disabledInterm === false && scores >= 5) {
      this.setState({
        disabledExpert: false
      });
    } else if (this.state.disabledExpert === false && scores >= 5) {
      this.setState({
        disabledMaster: false
      });
    } else if (this.state.disabledRook && scores < 5) {
      this.setState({
        disabledRook: true
      });
    } else if (this.state.disabledStudent && scores < 5) {
      this.setState({
        disabledStudent: true
      });
    } else if (this.state.disabledInterm && scores < 5) {
      this.setState({
        disabledInterm: true
      });
    } else if (this.state.disabledExpert && scores < 5) {
      this.setState({
        disabledExpert: true
      });
    } else if (this.state.disabledMaster && scores < 5) {
      this.setState({
        disabledMaster: true
      });
    }

This is where i call the states in the buttons i created

<Button
  onClick={() => {
    this.changeToquiz1();
    this.articelState();
  }}
>
  Rookie
</Button>
<Button
  disabled={this.state.disabledStudent}
  onClick={() => {
    this.articelState();
    this.changeToquiz2();
  }}
>
  Student
</Button>
<Button
  disabled={this.state.disabledInterm}
  onClick={() => {
    this.changeToquiz3();
    this.articelState();
  }}
>
  Intermediate
</Button>
<Button
  disabled={this.state.disabledExpert}
  onClick={() => {
    this.changeToquiz4();
    this.articelState();
  }}
>
  Expert
</Button>
<Button
  disabled={this.state.disabledMaster}
  onClick={() => {
    this.changeToquiz5();
    this.articelState();
  }}
>
  Master
</Button>

Any help thanks

Answer 1

There is a problem with too many if else after studnent level it will go in wrong condition. I have another solution for your problem instead of many boolean just keep one state like level and just increase level once player score more than 5 points.

const STUDENT = 1;
const INTERN = 2;
const EXPERT =3;
const MASTER =4;

state = {
  level: 0
}
handleDisableValue(score) {
  if(score > 5 && this.state.level < 4) {
    this.setState(prevState=> ({ level: prevState.level + 1 }));
  }
}

In your button:

<Button
 onClick={() => {
   this.changeToquiz1();
   this.articelState();
 }}
>
 Rookie
</Button>
<Button
 disabled={this.state.level < STUDENT}
 onClick={() => {
   this.articelState();
   this.changeToquiz2();
 }}
>
 Student
</Button>
<Button
 disabled={this.state.level < INTERN}
 onClick={() => {
   this.changeToquiz3();
   this.articelState();
 }}
>
 Intermediate
</Button>
<Button
 disabled={this.state.level < EXPERT}
 onClick={() => {
   this.changeToquiz4();
   this.articelState();
 }}
>
 Expert
</Button>
<Button
 disabled={this.state.level < MASTER}
 onClick={() => {
   this.changeToquiz5();
   this.articelState();
 }}
>
 Master
</Button>

I Have made working codesandbox with next level button this you should call once quiz is complete i used it just for demo purpose.