How to use onClick with divs in React.js
The Following code works now !!!
const test = () => {
const onClick = () => console.log('hi');
return (
<div onClick={onClick} aria-hidden="true">
Content here
</div>
)};
To set your mind at ease, the onClick
event does work with divs in react, so double-check your code syntax.
These are right:
<div onClick={doThis}>
<div onClick={() => doThis()}>
These are wrong:
<div onClick={doThis()}>
<div onClick={() => doThis}>
(and don't forget to close your tags... Watch for this:
<div onClick={doThis}
missing closing tag on the div)
This works
var Box = React.createClass({
getInitialState: function() {
return {
color: 'white'
};
},
changeColor: function() {
var newColor = this.state.color == 'white' ? 'black' : 'white';
this.setState({ color: newColor });
},
render: function() {
return (
<div>
<div
className='box'
style={{background:this.state.color}}
onClick={this.changeColor}
>
In here already
</div>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('div1'));
ReactDOM.render(<Box />, document.getElementById('div2'));
ReactDOM.render(<Box />, document.getElementById('div3'));
and in your css, delete the styles you have and put this
.box {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
}
You have to style the actual div you are calling onClick
on. Give the div a className and then style it. Also remember to remove this block where you are rendering App
into the dom, App is not defined
ReactDOM.render(<App />,document.getElementById('root'));