How to get value of button from Button Group element in React

Question

I am trying to get the value of button in each question and want to store the data. For that, I am using handleClick on Button Group to get the value of button and changing the state in state object by setting setState() but I am not getting undefined output. Can anyone tell If I am using correct method to get value of button from ButtonGroup.

code ::

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

class Section extends Component {
  // questions = [
  //   { question1: "I was stressed with my nerves on edge" },
  //   { question: "I lost hope and wanted to give up when something went wrong" },
  //   { question: "I feel very satisfied with the way I look and act" }
  // ];

  state = {
    que1: "",
    que2: "",
    que3: ""
  };

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

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

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

  render() {
    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">
          <CommonButton text={"NEXT"} />{" "}
        </Link>
      </>
    );
  }
}

export default Section;

Input ::

output :: undefined

Answer 1

I think you are trying to log state but instead you are doing console.log of this.setState() function. As setState do not return anything, output is undefined. In handler function just change

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

to

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

or better solution is to use callback of setState -

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

Answer 2

you are print this.setState

change this

console.log(
      this.setState({
        que2: event.target.attributes.getNamedItem("data-key3").value
      })
    );

to

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