onclick function does not work in React functional component

Question

I tried to add an onclick function called Test to the button "Click me" that will alert a message once I click on it. So far, I have had little success, i.e. nothing happened when I clicked on the button. Here is my code inside App.js:

import logo from './logo.svg';
import './App.css';
import React, {useState, useEffect, useCallback} from 'react';

const canvas_style = { 
    border:"1px solid #000000",
    position: "absolute",
    top: 0, 
    left: 0,
  }

function Coordinate(props) { 

  const [HorizontalLines, setHorizontalLines] = useState({"start": [], "end": []}); //store start/end points of original horizontal lines
  const [VerticalLines, setVerticalLines] = useState({"start": [], "end": []}); // store start/end points of original vertical lines 
  const [TransformedHorizontalLines, setTransformedHorizontalLines] = useState({"start": [], "end": []}); //store start/end points of original horizontal lines
  const [TransformedVerticalLines, setTransformedVerticalLines] = useState({"start": [], "end": []}); // store start/end points of original vertical lines 
  const [TransformedUnitVectors, setUnitVectors] = useState([[1,0], [0,1]])

  useEffect(() => { //create coordinate plane on coordinate canvas once rendered
    var grid_size = 40;
    var x_axis_distance_grid_lines = 10;
    var y_axis_distance_grid_lines = 10;

    var canvas = document.getElementById("coordinates");
    var ctx = canvas.getContext("2d");

    // canvas width
    var canvas_width = canvas.width;

    // canvas height
    var canvas_height = canvas.height;

    // no of vertical grid lines
    var num_lines_x = Math.floor(canvas_height/grid_size);

    // no of horizontal grid lines
    var num_lines_y = Math.floor(canvas_width/grid_size);

    for(var i=0; i<=num_lines_x; i++) {
      ctx.beginPath();
      ctx.lineWidth = 2;
      
      // If line represents X-axis draw in different color
      if(i == x_axis_distance_grid_lines) 
          ctx.strokeStyle = "#000000";
      else
          ctx.strokeStyle = "#e9e9e9";
      
      if(i == num_lines_x) {
          ctx.moveTo(0, grid_size*i);
          ctx.lineTo(canvas_width, grid_size*i);
          var new_start_point = [0, grid_size*i];
          var new_end_point = [canvas_width, grid_size*i]; 
          var new_start = HorizontalLines["start"] 
          var new_end = HorizontalLines["end"] 
          new_start.push(new_start_point) 
          new_end.push(new_end_point) 
          setHorizontalLines({"start": new_start, "end": new_end})  
      }
      else {
          ctx.moveTo(0, grid_size*i);
          ctx.lineTo(canvas_width, grid_size*i);
          new_start_point = [0, grid_size*i];
          new_end_point = [canvas_width, grid_size]; 
          new_start = HorizontalLines["start"] 
          new_end = HorizontalLines["end"] 
          new_start.push(new_start_point) 
          new_end.push(new_end_point) 
          setHorizontalLines({"start": new_start, "end": new_end})  
      }
      ctx.stroke();
  }
  // Draw grid lines along Y-axis
for(i=0; i<=num_lines_y; i++) {
  ctx.beginPath();
  ctx.lineWidth = 1;
  
  // If line represents Y-axis draw in different color
  if(i == y_axis_distance_grid_lines) 
      ctx.strokeStyle = "#000000";
  else
      ctx.strokeStyle = "#e9e9e9";
  
  if(i == num_lines_y) {
      ctx.moveTo(grid_size*i, 0);
      ctx.lineTo(grid_size*i, canvas_height);
      new_start_point = [grid_size*i, 0];
      new_end_point = [grid_size*i, canvas_height]; 
      new_start = VerticalLines["start"] 
      new_end = VerticalLines["end"] 
      new_start.push(new_start_point) 
      new_end.push(new_end_point) 
      setVerticalLines({"start": new_start, "end": new_end})  
  }
  else {
      ctx.moveTo(grid_size*i, 0);
      ctx.lineTo(grid_size*i, canvas_height);
      new_start_point = [grid_size*i, 0];
      new_end_point = [grid_size*i, canvas_height]; 
      new_start = VerticalLines["start"] 
      new_end = VerticalLines["end"] 
      new_start.push(new_start_point) 
      new_end.push(new_end_point) 
      setVerticalLines({"start": new_start, "end": new_end})  
  }
  ctx.stroke();
}
  console.log(HorizontalLines['start'])
  console.log(HorizontalLines['end'])
  console.log(VerticalLines['start'])
  console.log(VerticalLines['end'])
  }, []);

  const Test = useCallback(() => { 
    alert("test"); //this function DOES NOT work.
  })

  return ( 
    <div style = {{position: "relative"}}> 
    <canvas id="coordinates" width="800" height="800" style={canvas_style}> </canvas>
    <canvas id="transformedCoordinates" width="800" height="800" style ={canvas_style}> </canvas>
    <button onClick={Test}>Click Me </button> 
    </div>
  )
}
function App() {
  return (
    <div> <Coordinate /> </div>
  );
}

Inside index.js, I called the App component:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Design from './test'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

I would appreciate if someone can suggest to me a solution to this problem. Thanks!

Kirill Savik · Accepted Answer · 2021-08-05 18:07:43Z

2

The button is behind of canvas. So click function is not act.

Please change canvas_style. Add z-index css;

const canvas_style = { 
    border:"1px solid #000000",
    position: "absolute",
    top: 0, 
    left: 0,
    zIndex: -1,
}

answered Aug 5, 2021 at 18:07

Kirill Savik

1,2886 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Đỗ Nguyên Tùng Over a year ago

That works! This is really awesome, I really did not think of the canvas overlap as an issue. Thank you so much!

Jaskaran Deol · Accepted Answer · 2021-08-05 18:03:57Z

1

Try

const Test = useCallback(() => { 
    alert("test"); //this function should work now.
  }, []);

Reference : https://dmitripavlutin.com/dont-overuse-react-usecallback/

edited Aug 5, 2021 at 18:03

answered Aug 5, 2021 at 17:59

Jaskaran Deol

367 bronze badges

2 Comments

Jaskaran Deol Over a year ago

Now you check again ? Thanks

Đỗ Nguyên Tùng Over a year ago

Thanks! I added the array to the useCallback(), but it unfortunately still doesn't work for me. There was no alert when I clicked on the button.

Deepak Ranga · Accepted Answer · 2021-08-05 18:08:32Z

1

Maybe this will help : <button onClick={this.Test}> Click Me </button>

answered Aug 5, 2021 at 18:08

Deepak Ranga

1231 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

onclick function does not work in React functional component

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related