CODEWITHSUNDEEP
javascriptreactjseventsreact-hooks
ssaquif
ssaquif

Reputation: 330

onMouseOver() function does not trigger in react

So I am trying to use onMouseOver on my React component like this 

<CookieDetails
  key={cookie.id}
  name={cookie.name}
  cost={cookie.cost}
  value={cookie.cost}
  numOwned={purchasedItems[cookie.id]}
  onMouseOver={event => {
    console.log('cookies');
    if (numCookies < cookie.cost) {
      alert('Not Enough Cookies');
      return;
    }
    setPurchasedItems({
      ...purchasedItems,
      [cookie.id]: purchasedItems[cookie.id] + 1,
    });
    setNumCookies(numCookies - cookie.cost);
    console.log('purchased', purchasedItems[cookie.id], numCookies);
  }}
/>;

and here is whats inside my component for now

import React from 'react';
const CookieDetails = ({ name, cost, value, numOwned }) => {
  return (
    <React.Fragment>
      <div className="cookie-details-wrapper">
        <h3>{name}</h3>
        <p>Cost:{cost}</p>
        <p>Value:{value}</p>
        <p>Owned:{numOwned}</p>
      </div>
    </React.Fragment>
  );
};

export default CookieDetails;

However when I mouse over my component, nothing happens. Doesn't event console log cookies. Any help would be appreciated

Upvotes: 1

Views: 912

Answers (2)

Prince Sodhi
Prince Sodhi

Reputation: 2955

So here onMouseOver is a prop that you are passing to children. You need to trigger onMouseOver on children

<CookieDetails
  key={cookie.id}
  name={cookie.name}
  cost={cookie.cost}
  value={cookie.cost}
  numOwned={purchasedItems[cookie.id]}
  onMouseOver={event => {
    console.log('cookies');
    if (numCookies < cookie.cost) {
      alert('Not Enough Cookies');
      return;
    }
    setPurchasedItems({
      ...purchasedItems,
      [cookie.id]: purchasedItems[cookie.id] + 1,
    });
    setNumCookies(numCookies - cookie.cost);
    console.log('purchased', purchasedItems[cookie.id], numCookies);
  }}
/>;



import React from 'react';
const CookieDetails = ({ name, cost, value, numOwned, onMouseOver }) => {
  return (
    <React.Fragment>
      <div className="cookie-details-wrapper" onMouseOver={onMouseOver}>
        <h3>{name}</h3>
        <p>Cost:{cost}</p>
        <p>Value:{value}</p>
        <p>Owned:{numOwned}</p>
      </div>
    </React.Fragment>
  );
};

export default CookieDetails;

Upvotes: 0

Quentin
Quentin

Reputation: 944442

CookieDetails isn't a DOM element (so it doesn't have native handling for events) it is a component you wrote. You don't do anything with the onMouseOver prop.

You need to read that prop and attach it to a DOM element (like the div).

const CookieDetails = ({ name, cost, value, numOwned, onMouseOver }) => {
  return (
    <React.Fragment>
      <div onMouseOver={onMouseOver} className="cookie-details-wrapper">

Upvotes: 5

Related Questions