0
249
ViewsWhy "this" is returning undefined from my functional component in ReactJS?
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.
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;2 answers
Answer question0
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
0
Fat arrow functions are not able to access "this" keyword. Try updating the function as a regular function.
This might be helpful : https://www.section.io/engineering-education/how-to-use-javascript-arrow-functions-and-this-keyword/