CODEWITHSUNDEEP
reactjs
pooja gajera
pooja gajera

Reputation: 383

How to Disabled button when state is empty in react

I am trying to disabled the button. The NEXT button should only be enabled when all the questions in a section are answered. I am giving disabled attribute in button and writing logic but when user answer second question. Button gets enabled automatically. Can anyone suggest me what's wrong in my code ?

code ::

import React, { Component } from "react";
import Answers from "../Answers/Answers";
import CommonButton from "../Button/CommonButton";
import { Link } from "react-router-dom";
import { Button } from "semantic-ui-react";

// import questions from "../../data/answers";

class Section extends Component {
  state = {
    que1: "",
    que2: "",
    que3: ""
  };

  handleClick = event => {
    this.setState(
      {
        que1: event.target.attributes.getNamedItem("data-key").value
      },
      () => {
        console.log(this.state.que1);
      }
    );
  };

  handleClick2 = event => {
    this.setState(
      {
        que2: event.target.attributes.getNamedItem("data-key2").value
      },
      () => {
        console.log(this.state.que2);
      }
    );
  };

  handleClick3 = event => {
    this.setState(
      {
        que3: event.target.attributes.getNamedItem("data-key3").value
      },
      () => {
        console.log(this.state.que3);
      }
    );
  };

  render() {
    console.log(this.state);
    const { que1, que2, que3, buttonDisabled } = this.state;
    return (
      <>
        <p>1. I was stressed with my nerves on edge.</p>
        <Button.Group widths="5" onClick={this.handleClick}>
          <Button data-key="Never">Never</Button>
          <Button data-key="Occassionally">Occassionally</Button>
          <Button data-key="Often">Often</Button>
          <Button data-key="Very Often">Very Often</Button>
          <Button data-key="Always">Always</Button>
        </Button.Group>
        <span />
        <p>2. I lost hope and wanted to give up when something went wrong.</p>
        <Button.Group widths="5" onClick={this.handleClick2}>
          <Button data-key2="Never">Never</Button>
          <Button data-key2="Occassionally">Occassionally</Button>
          <Button data-key2="Often">Often</Button>
          <Button data-key2="Very Often">Very Often</Button>
          <Button data-key2="Always">Always</Button>
        </Button.Group>
        <p>3. I feel very satisfied with the way I look and act</p>
        <Button.Group widths="5" onClick={this.handleClick3}>
          <Button data-key3="Never">Never</Button>
          <Button data-key3="Occassionally">Occassionally</Button>
          <Button data-key3="Often">Often</Button>
          <Button data-key3="Very Often">Very Often</Button>
          <Button data-key3="Always">Always</Button>
        </Button.Group>
        <p />

        <Link to="/section2">
          <Button disabled={!que1 && !que2 && !que3}>NEXT</Button>
          {/* <CommonButton text={"NEXT"}  />{" "} */}
        </Link>
      </>
    );
  }
}

export default Section;

output :: enter image description here

Upvotes: 0

Views: 156

Answers (4)

soywod
soywod

Reputation: 4510

There is 2 things:

  1. The ButtonGroup seems not to have the onClick props. You should put them on Button.

  2. Your condition is not good:

    <Button disabled={!que1 || !que2 || !que3}>NEXT</Button>

    You want to disable the button when ONE OF que1, que2 or que3 is not good. Not when ALL 3 are not good together.

Upvotes: 1

Prithwee Das
Prithwee Das

Reputation: 5226

First of all your conditions for disabling the button is incorrect. the correct one is

<Button disabled={!que1 || !que2 || !que3}>NEXT</Button>

But even after that, the users can still change route by clicking on it as you have the button wrapped in <Link> component, You're disabling the button, not the link. for this use case, I would suggest giving the button an onClick handler and pragmatically changing the route.

<Button disabled={!que1 || !que2 || !que3} onClick={()=>{this.props.history(/path)}} >NEXT</Button>

Upvotes: 2

Amir Hedieh
Amir Hedieh

Reputation: 1178

Your booleans logic is not correct Try code below:

<Button disabled={!que1 || !que2 || !que3}>NEXT</Button>

Upvotes: 1

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

All you need is || condition instead of &&

Change

  <Button disabled={!que1 && !que2 && !que3}>NEXT</Button>

To

 <Button disabled={!que1 || !que2 || !que3}>NEXT</Button>

Upvotes: 1

Related Questions