ReactJS _ name custom attribute - The custom attribute of my React component returns "undefined"

Question

I'm working with ReactJS.

I'm trying to get a custom attribute -name- of my ReactJS component. The e.target.name returns "undefined" on my console.

I can't figure out why.

Here my snippet- you can test it on CodeSandbox. Update: the snippet have been updated with a working solution. I use React 16.4.2 + NextJS 6.1.1 at the time of writing these lines.

export default class view_recipes extends Component {
  
  state={ 
    displayCategoryMenu:true,
    displayBox1: false, 
    displayBox2: false,
    displayBox3: false,
    displayBox4: false,
    displayBox5: false,
    displayBox6: false,
  };

  handleDisplaying = (e) => { 
    e.preventDefault();
    console.log("EVENT: ",  e.currentTarget.attributes.reactname.value )
    let display = { 
      displayCategoryMenu:false,
      displayBox1: false, 
      displayBox2: false,
      displayBox3: false,
      displayBox4: false,
      displayBox5: false,
      displayBox6: false,
    };

    console.log("display: ", display)
    
  }

  render() {
    return (
    <Layout>
      <div className={style.page}>
        <div 
        style={this.state.displayCategoryMenu? {} : { display: 'none' }}
        className={style.category_grid} > 

            <div reactname="displayBox1" onClick={(e) => this.handleDisplaying(e)} > 
              <Populater_s_ComponentHere />
            </div>
        </div>
           // The functionalities above determine if I display this component
           <div
           style={this.state.displayBox1 ? {} : { display: 'none' }}
           > 
              <SomeComponentHere />   
           </div> 
      </div>
    </Layout>
    )
  }
}

The solutions of Devin Fields and Hemari Davari works well on the above snippet. Sadly seems my code block with theses greats solutions. So I have refactored my sandbox to make it more near of the reality of my code. You will see the attributes return undefined.

Here the refactored Snippet: https://codesandbox.io/s/l5k5ynv9vq .

Thanks

Devin Fields · Accepted Answer · 2018-08-17T18:22:24.273

2

It should be under e.target.attributes. I just checked myself, and it is there. Specifically, e.target.attributes.name.value.

Here the functional snippet.

Also see these answers, which pose different means of passing an attribute to an onClick method: div's id attribute is undefined/not getting captured onClick in a react app

you are using "this.handleDisplaying" but the problem is the context is being changed when the method is called, and that context houses no handleDisplaying method. If you remove "this" and simply call the handleDisplaying method, it works as intended. This should be fine for your case, since you are not passing the method down to a child and require the context to stay the same.

This snippet shows the alternative to removing 'this', which is converting the component to a class: https://codesandbox.io/s/m7qr67o23x

edited Aug 17 '18 at 18:22

answered Aug 17 '18 at 17:38

Devin Fields

2,066
1
10
18

Thanks but, arf ! I have seen that my code doesn't work with this solution. I have refactored my snippet ot make it more near of the reality of my code. Here the new sandbox snippet if you want to get an eye: https://codesandbox.io/s/l5k5ynv9vq – Webwoman Aug 17 '18 at 17:53
@Webman It is because you are looking for 'name', but the attribute property is 'reactname'. Sorry that it was changed in the snippet in my answer. You could change them both back to 'name.' – Devin Fields Aug 17 '18 at 17:55
ho yes my bad, it still doesn't works on my own code - displaying undefined- but I will take some time to monitor why, thanks – Webwoman Aug 17 '18 at 17:58
Could you post your actual component? I can spot the issue if I see your actual code. – Devin Fields Aug 17 '18 at 18:00
Okay I have updated my post with the a more complete snippet – Webwoman Aug 17 '18 at 18:04
@Webman namedNodeMap is what you get if you only console log 'e.target.attributes'. Are you sure you also have the reactname.value? – Devin Fields Aug 17 '18 at 18:32
When I remove the "this" it returns me : "handleDisplaying is not defined". I will retest again to double check – Webwoman Aug 17 '18 at 18:32
I assumed your updated snippet was closer to your code, but I see now that the code you've posted here is actually already a class, and thus removing "this" is not an option. You should also try binding the method to your component in the constructor. – Devin Fields Aug 17 '18 at 18:35
Okay It's works ! I was forget a "r" on `currentTarget`, that make the process fails. Thanks ! – Webwoman Aug 17 '18 at 18:35

score 1 · Answer 2 · answered Aug 17 '18 at 17:44

1

You can get with

e.target.attributes["name"] or e.target.attributes[0]

answered Aug 17 '18 at 17:44

Hemadri Dasari

32,666
37
119
162

ReactJS _ name custom attribute - The custom attribute of my React component returns "undefined"

2 Answers2