How to Disabled button when state is empty in react

Question

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 ::

Prithwee Das · Accepted Answer · 2019-03-10 05:24:07Z

2

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>

answered Mar 10, 2019 at 5:24

Prithwee Das

5,3162 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pooja gajera Over a year ago

I have not added this component in router so this component doesn't have history parameter.

Prithwee Das Over a year ago

You can use the withRouter HOC from react-router-dom to include that.

Hemadri Dasari · Accepted Answer · 2019-03-10 05:13:56Z

1

All you need is || condition instead of &&

Change

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

To

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

answered Mar 10, 2019 at 5:13

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

7 Comments

pooja gajera Over a year ago

User is still able to click even after button is disabled.

Hemadri Dasari Over a year ago

If it is disabled there won’t be any onClick action

pooja gajera Over a year ago

I cross-verified that. click event is still happening on disabled button

Prithwee Das Over a year ago

By 'Click event happening' do you mean that the link still works?

pooja gajera Over a year ago

user is able to click because I wrapped button with link. Where should I add Link so that user can click on next page ?

|

Amir Hedieh · Accepted Answer · 2019-03-10 05:19:00Z

1

Your booleans logic is not correct Try code below:

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

answered Mar 10, 2019 at 5:19

Amir Hedieh

1,1781 gold badge17 silver badges30 bronze badges

Comments

soywod · Accepted Answer · 2019-03-10 05:24:18Z

1

There is 2 things:

The ButtonGroup seems not to have the onClick props. You should put them on Button.
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.

edited Mar 10, 2019 at 5:24

answered Mar 10, 2019 at 5:18

soywod

4,5784 gold badges29 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to Disabled button when state is empty in react

4 Answers 4

2 Comments

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related