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

user_19105436 0
Viewed 45

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 codesandbox.io

Thank you very much in advance.

enter image description here

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"
      }}
      onMouseOver={() => console.log("item: ", this)}
    >
      {item.listing.name}
    </div>
  );
};

export default Property;

reactjs javascript
2 Answers

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"
      }}
      onMouseOver={(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

user_36297480
user_138442030
Related