React image onClick not executing

user_7216007 0
Viewed 61

Hello I have a React project and I want to trigger an action when I click an image but the function is not executing. I want to use this to access another View using react-router-dom history. Here is my code:

import React from "react";
import "perfect-scrollbar/css/perfect-scrollbar.css";

import { useHistory } from 'react-router-dom';

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

import image from '../assets/tesis/IMG_8006.JPG'
import image2 from '../assets/tesis/IMG_8008.PNG'
import image3 from '../assets/tesis/IMG_8007.PNG'


import styles from "assets/jss/material-dashboard-pro-react/layouts/adminStyle.js";


const useStyles = makeStyles(styles);

export default function Dashboard(props) {
  const classes = useStyles();
  const history = useHistory();

  const handleClick = () => {
    console.log("Click")
  }

  return (
    <div className={classes.wrapper} style={{flex:1, justifyContent:'center', display:'flex' , alignItems:'center' , backgroundImage: `url(${image})`, height: '100vh', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize:'cover'}}>
      <img src={image2} style={{width:'70vh', alignSelf:'center', position: 'absolute'}} alt="Error" ></img>
      <img src={image3} style={{width:'50vh'}} onClick={() => {
        handleClick();
      }} alt="Error"></img>
    </div>
  );
}
reactjs
3 Answers

In first image you give position absolute with 70vh so it takes space of the second image. You are not able to click second image because of this problem otherwise logic is fine

<img src={image2} style={{width:'70vh', alignSelf:'center', position: 'absolute'}} alt="Error" ></img>
<img src={image3} style={{width:'50vh'}} onClick={() => {
        handleClick();
      }} alt="Error"></img>

But I would change like this onClick={handleClick}

user_135448490

Please try to use this one

const handleClick = (e) => {
    console.log("Click", e)
  }

<img src={image3} style={{width:'50vh'}} onClick={handleClick} alt="Error"></img>
user_118475130

Can you try to remove the position absolute from the first image? Maybe it is positioning on top of the second one

<div className={classes.wrapper} style={{flex:1, justifyContent:'center', display:'flex' , alignItems:'center' , backgroundImage: `url(${image})`, height: '100vh', backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize:'cover'}}>
      <img src={image2} style={{width:'70vh', alignSelf:'center', }} alt="Error" ></img>
      <img src={image3} style={{width:'50vh'}} onClick={() => {
        handleClick();
      }} alt="Error"></img>
    </div>
user_134901650
Related