CODEWITHSUNDEEP
reactjs
user11331566
user11331566

Reputation:

Multiple data attributes in React

I need to set more than one data attribute with custom info inside of it. Unfortunately, this isn´t working:

    <p data={"Very important info"} onClick={this.accessAttributes}
data2={"A lot of important info"}></p>

accessAttributes = e =>{
ToggleFavorito = (e) =>{

  let data1=e.currentTarget.data;
  let data2=e.currentTarget.data2;
  console.log(data1, data2)

}

It returns "undefined".

How could I accomplish this?

Upvotes: 2

Views: 2467

Answers (3)

user1503606
user1503606

Reputation: 4290

I did it like this I needed a way to pass any data attribute through to my component.

import Player from '../Player/Player';

<Player setup={
    {
        code: "<code>",
        type: "<type>"
    }
}/>

Component

import React from "react";

export default class Player extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        const attributes = {
            className: 'media',
        }
        for (const [key, value] of Object.entries(this.props.setup)) {
            attributes[`data-${key}`] = value;
        }
        return (<div {...attributes}></div>);
    }
}

Dom output

<div class="media" data-code="<code>" data-type="<type>"></div>

Upvotes: 0

Sai Sandeep Vaddi
Sai Sandeep Vaddi

Reputation: 290

If your intention is to use data or data2 as normal html attributes, you can use 


accessAttributes = e =>{
  let data1=e.currentTarget.getAttribute("data");
  let data2=e.currentTarget.getAttribute("data2")
  console.log(data1, data2)
}

If you wanted them as data-attributes, you can use


<p data-one={"Very important info"} onClick={this.accessAttributes}
data-two={"A lot of important info"}></p>

accessAttributes = e =>{
  let data1=e.currentTarget.dataset.one
  let data2=e.currentTarget.dataset.two
  console.log(data1, data2)
}

By the way, If your p is in render, there is no content inside p to click. Or at least it should have a height and width.

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  
  accessAttributes = e =>{
  let data1=e.currentTarget.getAttribute("data");
  let data2=e.currentTarget.getAttribute("data2")
    console.log(data1, data2)
  }
   
  accessAttributes2 = e =>{
  let data1=e.currentTarget.dataset.one;
  let data2=e.currentTarget.dataset.two;
  console.log(data1, data2)
}

  render() {
    return (
      <div>
        <p data={"Very important info"} onClick={this.accessAttributes}
            data2={"A lot of important info"}>x</p>

        <p data-one={"Very important info"} onClick={this.accessAttributes2}
            data-two={"A lot of important info"}>y</p>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Upvotes: 3

Gonzalo.-
Gonzalo.-

Reputation: 12672

You can use dataset api

Basically, you convert from data-some-field to target.dataset.someField, being some-field converted to camelCased someField (target.dataset is a map object with your properties you set in a props fashion style)

See this fiddle

class HelloWorld extends React.Component {

  accessAttributes(e){
    let data1 = e.target.dataset.value;
    let data2 = e.target.dataset.numberTwo;
    console.log(`data1: ${data1}`);
    console.log(`data2: ${data2}`);
}

    render() {
        return <p data-value={"Very important info"} onClick={this.accessAttributes}
data-number-two={"A lot of important info"}>P TAG!</p>;
    }
}

ReactDOM.render(<HelloWorld />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Keep in mind that by data- naming conventions you cannot use numbers for naming your data- fields

Upvotes: 1

Related Questions