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?
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>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
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>
<p>?