How to use onClick with divs in React.js

Question

I'm making a very simple application where you can click on square divs to change their color from white to black. However, I'm having trouble. I'd like to use the onClick function to allow a user to click on a square to change its color, but it doesn't seem to be working. I've tried using spans and empty p tags, but that doesn't 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's a link to my small project on CodePen. http://codepen.io/anfperez/pen/RorKge

cssyphus · Accepted Answer · 2022-07-25T13:20:25.773

70

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)

edited Jul 25 '22 at 13:20

answered Oct 18 '20 at 21:47

cssyphus

37,875
18
96
111

score 48 · Answer 2 · edited Mar 31 '19 at 19:26

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'));

Thank you! It was styling the box that was tripping me up a bit. That definitely works! — Leia_Organa, Nov 10 '16 at 20:27

score 7 · Answer 3 · answered Jun 24 '21 at 01:11

7

The Following code works now !!!

const test = () => {
const onClick = () => console.log('hi');

return (
<div onClick={onClick} aria-hidden="true">
  Content here
</div>
)};

answered Jun 24 '21 at 01:11

Gustavo Morillo

385
3
7

score 2 · Answer 4 · answered Nov 10 '16 at 19:29

Your box doesn't have a size. If you set the width and height, it works just 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>

Thanks Timo, but the code doesn't seem to work when I try to use it in my CodePen snippet. Is that because I also have a width and height specified in my CSS file? I edited it with your code, but it still doesn't work. — Leia_Organa, Nov 10 '16 at 20:03
How does it not work? The snippet in my answer works just fine. — TimoStaudinger, Nov 10 '16 at 20:06

score 2 · Answer 5 · answered Nov 26 '20 at 16:02

2

Whilst this can be done with react, be aware that using onClicks with divs (instead of Buttons or Anchors, and others which already have behaviours for click events) is bad practice and should be avoided whenever it can be.

answered Nov 26 '20 at 16:02

GeorgeWL

333
2
18

score 0 · Answer 6 · edited Dec 24 '17 at 17:03

0

This also works:

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

You can also pick the color from drop-down values and update in place of 'black';

(CodePen)

edited Dec 24 '17 at 17:03

Stephen Rauch

47,830
31
106
135

answered Dec 24 '17 at 16:42

shobhit garg

1

score -1 · Answer 7 · answered Jun 14 '17 at 08:36

-1

I just needed a simple testing button for react.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>);
}

answered Jun 14 '17 at 08:36

Matthias Liszt

67
1
4

How this is related to the question ? – Juhil Somaiya Feb 24 '20 at 09:40

How to use onClick with divs in React.js

7 Answers7

Linked