How to access the value of x after onclick is run

Question

I have this code:

import React, { Component } from "react";

export default class Safe extends Component {
   constructor(props) {
      super(props);

      this.state = {
         userInput: "",
         password: 1234
      }
   }

   keyClicked = (evt) => {
      // HERE!!
   }

   render() {
      return (
         <div className="safe">
            <div className="display">{this.state.userInput}</div>
            <div className="keypad">
               {Array.from({length: 9}, (x, key) => <button className="key" key={key++} onClick={this.keyClicked}>{key++}</button>)}
            </div>
         </div>
      )
   }
}

I am attempting to make a "safe" with a number pad. In order to open the safe, the user must enter a specific code in order to "open it".

Currently, I am working on showing what the user has input through the number pad onto the display. However, I am unsure on how to get what number the user has inputted through the number pad. I have put a comment saying "HERE!!" to show where I want to access the inputted number.

I have attempted to use evt.target.value but when I try to console.log() the evt, it shows up as an empty string.

Any help is appreciated as I'm new to React!

Answer 1

Yea you can get this by this way

import React, { Component } from "react";

export default class Safe extends Component {
   constructor(props) {
      super(props);

      this.state = {
         userInput: "",
         password: 1234
      }
   }

   keyClicked = (evt) => {
     console.log(evt)
   }

   render() {
      return (
         <div className="safe">
            <div className="display">{this.state.userInput}</div>
            <div className="keypad">
               {Array.from({length: 9}, (x, key) => <button className="key" key={key++} onClick={()=>this.keyClicked(key++)}>{key++}</button>)}
            </div>
         </div>
      )
   }
}