How to access Data attribute in Button Click Event in React JS?

Sometimes we need to store some data in data attribute in html tags. And we can us it by JavaScript. But in react, how can we use it? In this article I try to explain how to we use it. There are lots of cases to use it but in this article I just explain only how can get by onClick.

<button onClick={OnClicked} data-value={'foo'}>Click Me!</button>

function OnClicked(event) {
    alert("Value of data-val here " + event.target.getAttribute("data-value"));   
};

Now if we click on the Click Me button we can get data attribute value which is show in the alert.