Capture this.name of a button in React onClick-CodePudding

I want to capture the name attribute of a button on click in React.

I tried the following code block:

export function TestButton(props){
    function logName() {
        console.log(this.name)
    }
    return(
        <button name={props.name} onClick={event => logName(event.currentTarget.getAttribute("name"))} type='button'>{props.text}</button>
    )
}

My expectation was that this code would allow me to create a button that displays the name in the console log:

<TestButton name='helloWorld' text='Click Me'/>

Instead I get an alert that this is undefined. This is in spite of my ability to see the name when I inspect the element.

I have also tried target instead of currentTarget with no luck. I also tried event.currentTarget.name without the results I desire.

What did i miss?

CodePudding user response：

Pleas try as follows:

export function TestButton(props){
  function logName() {
      console.log(props.name)
  }
  return(
    <button name={props.name} onClick={() => logName()} type='button'>{props.text}</button>
  )
}

CodePudding user response：

Try this

export function TestButton(props){
    const logName = (e, name) => {
        console.log("name attribute ->",  name)
    }
    return(
        <button name={props.name} onClick={ (e) => logName(e, props.name)} type='button'>{props.text}</button>
    )
}

CodePudding user response：

In react, I believe this is reserved for classes, whereas you are defining a functional component. In a functional component, the comparable state value would be stored with useState(). That being said, I'm not sure I see the need for that here, since this button is getting its props from somewhere and the value of name and text are not changing in this component. I would code it this way:

export const TestButton = ({props}) => {
  return(
    <button name={props.name} onClick={() => console.log(props.name)}>
      {props.text}
    </button>
  )
}

Now to go a bit further, maybe you want to use state wherever this button is being rendered. That could look like this:

import {TestButton} from "./someFile";

const [name, setName] = useState("some-button");
const [text, setText] = useState("click me!");

// now there could be some code here that decides what the name or text would be 
// and updates the values of each with setName("name") and setText("text")

const Page = () => (
  <>
    <TestButton props={{name: name, text: text}} />
  </>
)

This is all building off your current code, but now I will combine everything in a way that makes sense to me:

import {useState} from "react";

const [name, setName] = useState("some-button");
const [text, setText] = useState("click me!");

// some code to determine/change the value of the state vars if necessary

const TestButton = ({name, text}) => {
  return(
    <button name={name} onClick={() => console.log(name)}>
      {text}
    </button>
  )
}

export const Page = () => (
  <>
    <TestButton name={name} text={text} />
  </>
)