0

I have a pretty simple div that I need to react when I click it. I minified the problem to below but I can not get a log the Chrome debug screen not matter what I try.

I have tried different syntaxes but below is the "simplest" one. I don't know what else to try but the div will not respond.

 constructor(props) {
    super(props);
    this.divClicked = this.divClicked.bind(this);
  }
    
  divClicked (e) {
    console.log("DEBUG: divClicked!");
  }
 
  render () {
    const data = this.props.data;
    return (
      <div onClick={this.divClicked} id={data.id + 'a'} className='url1_div'>
      </div>
    );
  }
}

divClicked never fires and this is such a simple example I'm wondering is a parent component is causing the issue or some other component is some how effecting it.

howard
  • 234
  • 1
  • 11
  • Does this answer your question? [How to use onClick with divs in React.js](https://stackoverflow.com/questions/40535444/how-to-use-onclick-with-divs-in-react-js) – noninertialframe May 15 '21 at 01:32
  • Your `div` is empty. Are you sure you are clicking on the right div? Does this `div` take some height / width? Is it visible? – Ajeet Shah May 15 '21 at 01:47
  • See the below answer or if that doesn't help, please provide us a sandbox. – Ajeet Shah May 15 '21 at 03:12

1 Answers1

1

I have replicated your code on StackBlitz, and it works.

noninertialframe
  • 568
  • 1
  • 10
  • 24