React JS - accessing component property in an element attribute

Question

I have an element defined as class, and in the render() method I'm trying to give an element a custom attribute data-activates with an id. However, in the resulting html I just see the plaintext of the expression, either one of the following:

data-activates="{this.state._id}"

data-activates="${this.state._id}"

data-activates="{id}"

data-activates="${id}"

The id is present in both props and state, and outside of the element both of them work correctly:

<a className="dropdown-button waves-effect" href="#!" data-activates="{id}">

{ id }, {this.state._id} <- works here

</a>

For some reason React doesn't resolve expressions within the attribute and I need that for the dropdown to work. What am I doing wrong?

Bonus point for a better way to implement dropdown in React, if there is no way to make this code work.

Tholle · Accepted Answer · 2018-07-30 04:02:07Z

3

You have to go into JavaScript land inside your JSX with the help of {}. That way you can use any expression you like in the JSX.

Example

<a
  className="dropdown-button waves-effect"
  href="#"
  data-activates={this.state._id}
>
  Test
</a>

edited Jul 30, 2018 at 4:02

answered Jul 30, 2018 at 3:57

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yuri Drobkov Over a year ago

Indeed, the quotes were excessive, the working variant is: ` data-activates={'post_dropdown_'+id}` in my case. Thanks!

Akhil Aravind · Accepted Answer · 2018-07-30 03:57:31Z

1

You should not wrap data attributes inside QUOTES

data-activates={this.state._id}
data-activates={id}

This documentation clears everything check the documentation

answered Jul 30, 2018 at 3:57

Akhil Aravind

6,0451 gold badge18 silver badges37 bronze badges

Comments

Khanh Hua · Accepted Answer · 2018-07-30 03:59:22Z

0

Make sure you have tried the following:

<a data-activates={this.state._id}>...</a>
<a data-activates={id}>...</a>

Please bear in mind that JSX adheres to JS syntax first. So inside the curly brackets, you still can do interpolation within tildes (`):

<a data-activates={`my-id-${id}`}>...</a>

Cheers,

answered Jul 30, 2018 at 3:59

Khanh Hua

1,1361 gold badge14 silver badges26 bronze badges

Comments

imgnx · Accepted Answer · 2018-07-30 04:01:35Z

0

Don't use a dash. Use lowerCamelCase instead. React doesn't recognize elements with a dash in the name as a prop. So, instead of data-activates={id}, use dataActivates={id}.

answered Jul 30, 2018 at 4:01

imgnx

7962 gold badges13 silver badges31 bronze badges

2 Comments

Yuri Drobkov Over a year ago

Wrong, React will parse that into meaningless dataactivates=, without the dash. This attribute is an exception that doesn't follow the camelCase.

imgnx Over a year ago

Sorry. When you said "define element" I thought you mean you were creating a custom component.

Collectives™ on Stack Overflow

React JS - accessing component property in an element attribute

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related