CODEWITHSUNDEEP
javascriptreactjsevent-handling
The Dead Man
The Dead Man

Reputation: 5576

Get button value on clicked button react hooks

I have two buttons now I would like to get the value of a button after a button has been clicked.

Live demo codesandbox: get button value

I have tried the following.

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [position, setPosition] = useState("");

  const handleNextStep = (e) => {
    console.log("label", e.target.innerHTML);
    console.log("label", e.target.innerHTML);
  };
  return (
    <div className="App">
      <h1>Hello Click the buttons bellow</h1>
      <div className="btn-group my-3 d-flex justify-content-center align-items-center">
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomLeft" ? "btn-info text-white" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
            handleNextStep();
          }}
        >
          Bottom Left
        </button>
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomRight" ? "btn-info text-white" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomRight" ? "BottomRight" : "");
            handleNextStep();
          }}
        >
          Bottom Right
        </button>
      </div>
    </div>
  );
}
import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [position, setPosition] = useState("");

  const handleNextStep = (e) => {
    console.log("label", e.target.innerHTML);
    console.log("label", e.target.innerHTML);
  };
  return (
    <div className="App">
      <h1>Hello Click the buttons bellow</h1>
      <div className="btn-group">
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomLeft" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
            handleNextStep();
          }}
        >
          Bottom Left
        </button>
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomRight" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={() => {
            setPosition(position !== "BottomRight" ? "BottomRight" : "");
            handleNextStep();
          }}
        >
          Bottom Right
        </button>
      </div>
    </div>
  );
}

but I get the error: react-dom.development.js:327 Uncaught TypeError: Cannot read property 'target' of undefined.

What is wrong here?

Upvotes: 0

Views: 1080

Answers (1)

codemonkey
codemonkey

Reputation: 7925

I am assuming by "value" you mean what's inside the <button> tags. In which case, you need:

  const handleNextStep = (e) =>{
    console.log('label', e.target.innerHTML)
  }

Also, I am not sure how you would get react-dom.development.js:327 Uncaught TypeError: Cannot read property 'target' of undefined. You should just get an empty string or undefined.

Just a side node: e.target.innerText will also work.

Based on the update

handleNextStep = (e) => { is expecting an even that you do not send so you just need to pass the click event down into the proxy function:

      <div className="btn-group">
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomLeft" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={(e) => {
            setPosition(position !== "BottomLeft" ? "BottomLeft" : "");
            handleNextStep(e);
          }}
        >
          Bottom Left
        </button>
        <button
          type="button"
          className={`btn btn-sm mx-2  ${
            position === "BottomRight" ? "btn-info" : "btn-lightDark"
          }`}
          onClick={(e) => {
            setPosition(position !== "BottomRight" ? "BottomRight" : "");
            handleNextStep(e);
          }}
        >
          Bottom Right
        </button>
      </div>

https://codesandbox.io/s/weathered-https-s0y2x?file=/src/App.js

Upvotes: 3

Related Questions