Clickable div acting as a button function react js

Question

I have a button function inside the component 'CZButton', the button is used in "personlist" for a pop up, I am trying to make the div card inside of either 'personlist' or 'person' clickable so that instead of clicking the button, the div would be clicked and shows the drawer pop up.

I tried adding onclick inside divs and but it did not seem to reach the drawer function. here is a sandbox snippet, would appreciate the help.

https://codesandbox.io/s/l9mrzz8nvz?fontsize=14&moduleview=1

The code for `Drawer` is coded inside the button component and its state.. You will have to move the respective codes to the Person component and add `onClick` there.. — Panther, Feb 26 '19 at 05:36
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) — Aryan Beezadhur, Feb 02 '21 at 08:41

score 6 · Accepted Answer · answered Feb 26 '19 at 05:39

You can add an onClick listener in React just by writing something like:

// omitting the rest of the render function for brevity
return (
    <div className="row" onClick={e => console.log("Clicked")}></div>
);

Just be careful with the HTML semantics. Although it is possible, I wouldn't really recommend adding onClick events to a div. There are good resources online about HTML5 standards and what you should adhere too.

score 3 · Answer 2 · answered Mar 07 '19 at 05:11

Live Demo: https://n329k226om.codesandbox.io/

App.js

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  constructor() {
    super();

    this.test = this.test.bind(this);
  }

  test() {
    alert("function executed on clicking div");
  }

  render() {
    return (
      <div>
        <div
          onClick={() => this.test()}
          className="interactivediv fa fa-window-close"
        >
          div
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.interactivediv {
  height: 150px;
  width: 150px;
  background: rgb(68, 196, 196);
  cursor: pointer;
   border: 1px solid grey;
}

.interactivediv:active {
  border: 2px solid black;
}

Clickable div acting as a button function react js

2 Answers2