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                lt div gt                   lt div                     style     background  this state color                       onClick    this changeColor                   gt                   lt  div gt               lt  div gt                         Here s a link to my small project on CodePen  http   codepen io anfperez pen RorKge

User · Answer

For future googlers  thousands have now googled this question   To set your mind at ease  the onClick event does work with divs in react  so double-check your code syntax  These are right   lt div onClick  doThis  gt   lt div onClick       gt  doThis    gt   These are wrong   lt div onClick  doThis    gt   lt div onClick       gt  doThis  gt    and don t forget to close your tags    Watch for this   lt div onClick  doThis   missing closing tag on the div

User · Answer

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

User · Answer

Your box doesn t have a size  If you set the width and height  it works just fine    x000D   x000D  var Box   React createClass   x000D      getInitialState  function     x000D          return   x000D              color   black  x000D             x000D         x000D   x000D      changeColor  function     x000D          var newColor   this state color     white     black     white   x000D          this setState   x000D              color  newColor x000D              x000D         x000D   x000D      render  function     x000D          return   x000D               lt div gt  x000D                   lt div x000D                      style      x000D                          background  this state color  x000D                          width  100  x000D                          height  100 x000D                         x000D                      onClick    this changeColor  x000D                   gt  x000D                   lt  div gt  x000D               lt  div gt  x000D             x000D        x000D      x000D   x000D  ReactDOM render  x000D     lt Box   gt   x000D    document getElementById  box   x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt div id  box  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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                lt div gt                   lt div                     className  box                      style   background this state color                       onClick  this changeColor                   gt                      In here already                  lt  div gt               lt  div gt                        ReactDOM render  lt Box   gt   document getElementById  div1     ReactDOM render  lt Box   gt   document getElementById  div2     ReactDOM render  lt Box   gt   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  lt App   gt  document getElementById  root

User · Answer

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   lt div gt  lt button onClick  f  gt testing lt  button gt  lt  div gt

User · Answer

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

[javascript] How to use onClick with divs in React.js

Examples related to javascript

Examples related to reactjs

Examples related to onclick

Examples related to event-handling

Examples related to state