How to use onClick with div in React.js

Question

I am making a very simple application in which you can click square divs to change their color from white to black. However, I have a problem. I would like to use the onClick function so that the user can click the square to change its color, but it does not seem to work. I tried using spaces and empty p tags, but this does not work either.

Here is the code in question:

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 style = {{background: this.state.color}} onClick = {this.changeColor} > </div> </div> ); } }); 

Here is a link to my small CodePen project. http://codepen.io/anfperez/pen/RorKge

Answer 1

It 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 remove the styles you have and put this

 .box { width: 200px; height: 200px; border: 1px solid black; float: left; } 

You need to style the actual div you call onClick . Give the div the name of the class, and then tweak it. Also do not forget to delete this block where you show the App in dom, the application is not defined

 ReactDOM.render(<App />,document.getElementById('root')); 

Answer 2

Your size does not have a size. If you set the width and height, it works fine:

 var Box = React.createClass({ getInitialState: function() { return { color: 'black' }; }, changeColor: function() { var newColor = this.state.color == 'white' ? 'black' : 'white'; this.setState({ color: newColor }); }, render: function() { return ( <div> <div style = {{ background: this.state.color, width: 100, height: 100 }} onClick = {this.changeColor} > </div> </div> ); } }); ReactDOM.render( <Box />, document.getElementById('box') ); 

 <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> <div id='box'></div> 

Answer 3

I just need a simple test button for response.js. Here is what I did and it worked.

 function Testing(){ var f=function testing(){ console.log("Testing Mode activated"); UserData.authenticated=true; UserData.userId='123'; }; console.log("Testing Mode"); return (<div><button onClick={f}>testing</button></div>); } 

Answer 4

This also works:

I just changed using this.state.color==='white'?'black':'white' .

You can also choose a color from the drop-down values ​​and update instead of black;

( CodePen )