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.

Answer 1

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>

Answer 2

You should not wrap data attributes inside QUOTES

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

This documentation clears everything check the documentation

Answer 3

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,

Answer 4

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}.