Given the following code I would expect a printout of 3, 2, 1 when clicking the number 3. Actual printout is 1, 3, 2.
What is the reason for this?
document.body.onclick = () => {
console.log('1')
}
function Test() {
return (
<div onClick={() => console.log('2')}>
2
<div onClick={() => console.log('3')}>
3
</div>
</div>
)
}
ReactDOM.render(<Test/>, document.querySelector("#root"))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
1
<div id="root" />
</body>