Why "this" is returning undefined from my functional component in ReactJS?-CodePudding

I'm still beginner in ReactJS and JavaScript and I'm having trouble using this.

I'm rendering a list of properties and when I do onMouseOver I'd like to get the element I'm hovering over with this. But it's returning undefined.

Can you tell me why I'm getting this error?

Here's my code I put into

import React from "react";
import "./styles.css";

import Property from "./components/Property";

import { mock } from "./data/mock";

export default function App() {
  const [data] = React.useState(mock.data.dora.exploreV3.sections[2].items);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {data.map((item) => (
        <Property key={item.listing.id} item={item} />
      ))}
    </div>
  );
}

import React from "react";

const Property = ({ item }) => {
  return (
    <div
      style={{
        padding: "5px 0",
        cursor: "pointer"
      }}
      onm ouseOver={() => console.log("item: ", this)}
    >
      {item.listing.name}
    </div>
  );
};

export default Property;

CodePudding user response：

Try define var that = this in the global scope and whenever you need to use this inside a callback fucntion, use that instead. this is because the this can refers to different objects, depends on where it is being used.

for example: this inside a callback function is not the same as this inside a class

CodePudding user response：

The reason your code does not work as you expect is because this is not bound to the element during rendering. You need to access the element using the MouseEvent target. Your Property component should look like this:

import React from "react";

const Property = ({ item }) => {
  return (
    <div
      style={{
        padding: "5px 0",
        cursor: "pointer"
      }}
      onm ouseOver={(event) => console.log("item: ", event.target)}
    >
      {item.listing.name}
    </div>
  );
};

export default Property;

Alternatively, you could use React's useRef to do this. Here's a good article explaining how to implement that: https://linguinecode.com/post/get-current-element-react-onmouseover-or-onmouseenter