Question 206389 in Reactjs Question posted in
The new location for the React Documentation can be found here.

'event' is deprecated in reactjs script

I have this block of code in reactjs using Vite, following a YouTube tutorial.

import { MouseEvent } from 'react';


function ListGroup(){
    let items = ['New York','San Francisco','Los Angeles','Boston']
const handleClick = (event.click)=>console.log(event)
   return  (
    <>
        <h1>List Group</h1>
        {items.length===0 && <p>No items present</p>}
<ul className="list-group">
{items.map((item,index) => (<li className = "list-group-item" 
                               key = {item}
                               onClick = {handleClick}>
                                {item}
                             </li>))}
        </ul>
    </>);
}
export default ListGroup;

However, it throws me the following error

'event' is deprecated.ts(6385) lib.dom.d.ts(26990, 4): The declaration was marked as deprecated here.

This is my package.json file

{
  "name": "tutorial_app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.3.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
    "@vitejs/plugin-react": "^4.0.1",
    "eslint": "^8.44.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.0"
  }
}

I was trying to run the code, and get a list on a localhost, where I could click on each of the elements and get some information. This however, is not happening

Tags:

3

Answers


  1. 0

    You have a missing event variable somewhere, causing acess to window.event

    // for example,
function foo(ev) {
   event // error: window.event is deprecated
}

    edit:

    let x = (event.click) => console.log(event) // actually is a TS error, should be `({click})=>...`
// "use strict";
// let x = (event.click);
// console.log(event);
    Login or Signup to reply.
  2. 0

    The following should solve your problem. Also, please note how the handler function is called. Good luck!

    import { MouseEvent } from "react";

function ListGroup() {
  let items = ["New York", "San Francisco", "Los Angeles", "Boston"];
  const handleClick = (event) => console.log(event);
  return (
    <>
      <h1>List Group</h1>
      {items.length === 0 && <p>No items present</p>}
      <ul className="list-group">
        {items.map((item, index) => (
          <li
            className="list-group-item"
            key={item}
            onClick={(event) => handleClick(event)}
          >
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}
export default ListGroup;
    Login or Signup to reply.
  3. 0

    In the JSX, actually pass the event to the handler:

    <li className = "list-group-item" 
                           key = {item}
                           onClick = {(e)=>handleClick(e)}>
                            {item}
                         </li>

    this way the handleClick will have access to the right event.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search