In the code below I'm using e.currentTarget.dataset.id to get the index of the clicked li, but it returns undefined, what is the issue? how can I use e to get the index?

 class Answers extends React.Component {
    constructor(props) {
        super(props);
}

handleCheck(e) {
    console.log(e.currentTarget.dataset.id);
}

render() {
    return (
        <div>
            <ul>

                <li onClick={this.handleCheck.bind(this)} data-id="1"><span>A</span> <p>{this.props.answers[0]}</p></li>

                <li onClick={this.handleCheck.bind(this)} data-id="2"><span>B</span> <p>{this.props.answers[1]}</p></li>

                <li onClick={this.handleCheck.bind(this)} data-id="3"><span>C</span> <p>{this.props.answers[2]}</p></li>

                <li onClick={this.handleCheck.bind(this)} data-id="4"><span>D</span> <p>{this.props.answers[3]}</p></li>

                {this.props.answers[3]}</p></li>
          </ul >
            </div >
        );
    }
}

In the code below I'm using e.currentTarget.dataset.id to get the index of the clicked li, but it returns undefined, what is the issue? how can I use e to get the index?

 class Answers extends React.Component {
    constructor(props) {
        super(props);
}

handleCheck(e) {
    console.log(e.currentTarget.dataset.id);
}

render() {
    return (
        <div>
            <ul>

                <li onClick={this.handleCheck.bind(this)} data-id="1"><span>A</span> <p>{this.props.answers[0]}</p></li>

                <li onClick={this.handleCheck.bind(this)} data-id="2"><span>B</span> <p>{this.props.answers[1]}</p></li>

                <li onClick={this.handleCheck.bind(this)} data-id="3"><span>C</span> <p>{this.props.answers[2]}</p></li>

                <li onClick={this.handleCheck.bind(this)} data-id="4"><span>D</span> <p>{this.props.answers[3]}</p></li>

                {this.props.answers[3]}</p></li>
          </ul >
            </div >
        );
    }
}

• javascript
• html
• reactjs
• ecmascript-6

• 1 I dont see an id anywhere? – Jonas Wilms Commented Apr 7, 2018 at 19:37
• @JonasW. sorry, my bad, edited the post – ILoveReactAndNode Commented Apr 7, 2018 at 20:58

1 Answer 1

dataset reads the data-xx attribute in a give DOM element. so <span data-id="1">test</span> will evaluate dataset.id to 1. You need to pass data attribute when rendering the dom elements then you'll be able to read them.

class Answers extends React.Component {
    constructor(props) {
        super(props);
    }

   handleCheck(e) {
   console.log(e.currentTarget.dataset.id );
}

    render() {
      const { answers } = this.props;
        return (
            <div>
                <ul>
                {answers.map((answer, i) =>
                <li onClick={this.handleCheck} data-id={i}>
                  <span>{String.fromCharCode(65+i)}</span> <p>{answer}</p>
                 </li>
                )}
                    </ul>
                </div>
            );
    }
}

const answers = ['one', 'two', 'three'];
ReactDOM.render(<Answers answers={answers} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />