Modify the background of the parent component when hovering in ReactJS

Question

Modify the background of the parent component when hovering in ReactJS

Here is my React code snippet that I am working with:

Code

My goal is to change the background of the App component to the "E-commerce" picture when hovering over it.

This should apply to all other pictures as well.

Any assistance in solving this issue would be greatly appreciated.

css reactjs

Answer 1

Answer №1

According to the React documentation, it is advised to use context only for global state such as the current user or theme. Utilizing context for components can reduce their reusability.

For reference: updated code

The component tree structure is as follows: App -> SolutionBox -> SolutionItem.

When you need to "react" to an event in SolutionItem from App but SolutionBox is in between, you will have to pass the event through SolutionBox to reach App.

Step 1

Add a prop to SolutionItem named onHover, which will be a callback function allowing any parent component to respond to changes.

function SolutionsSectionBoxItem({ solutionIMG, onHover }) {
  let callOnHover = state => {
    if (_.isFunction(onHover)) {
      onHover(state);
    }
  };

  return (
    <div className="solutions-section-item-box">
      <img
        src={solutionIMG}
        alt=""
        onMouseEnter={() => {
          callOnHover(true);
        }}
        onMouseLeave={() => {
          callOnHover(false);
        }}
        className="solutions-section-item-img"
      />
    </div>
  );
}

Step 2

Introduce a prop to SolutionBoxItem called onBGChanged, which again will be a callback function triggered upon any SolutionItem hover event. This function will accept a menuName string and pass the current or default menu name.

function SolutionsSectionBox({ onBGChanged }) {
  let callBGChanged = menuName => {
    if (_.isFunction(onBGChanged)) {
      onBGChanged(menuName);
    }
  };

  return (
    <div className="solutions-section-box-box">
      <SolutionItem
        solutionIMG={Ecommerce}
        onHover={state => {
          callBGChanged(state === true ? "Ecommerce" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={SalesMarketing}
        onHover={state => {
          callBGChanged(state === true ? "SalesMarketing" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={Analytics}
        onHover={state => {
          callBGChanged(state === true ? "Analytics" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={Middleware}
        onHover={state => {
          callBGChanged(state === true ? "Middleware" : "default");
        }}
      />
    </div>
  );
}

Step 3

In the App component, listen for changes. Here, update the state whenever the mouse enters or leaves a solution item. To change the background, CSS is used to control the background URL. This might be challenging as different CSS classes would be required for each background type based on the bgImage state value.

    export default function App() {
  const [bgImage, setbgImage] = useState(E);

  const onBGChanged = menuName => {
    setbgImage(menuName);
  };

  return (
    <div className={`App ${bgImage === "default" ? "" : `App${bgImage}`}`}>
      <SolutionBox onBGChanged={onBGChanged} />
    </div>
  );
}

In CSS

Maintain the original App class and add an additional one based on the bgImage value, like 'AppEcommerce', 'AppSalesMarketing', etc., to update the background-image accordingly.

.AppEcommerce {
  background-image: url(https://placekitten.com/600/600);
}

.AppSalesMarketing {
  background-image: url(https://placekitten.com/500/800);
}

.AppAnalytics {
  background-image: url(https://placekitten.com/800/500);
}

.AppMiddleware {
  background-image: url(https://placekitten.com/700/700);
}

Extra

To ensure the incoming props are functions before calling them, lodash is added as a defensive measure. This practice is recommended for future-proofing the component.

let callBGChanged = menuName => {
    if (_.isFunction(onBGChanged)) {
      onBGChanged(menuName);
    }
  };

Answer 2

According to the React documentation, it is advised to use context only for global state such as the current user or theme. Utilizing context for components can reduce their reusability.

For reference: updated code

The component tree structure is as follows: App -> SolutionBox -> SolutionItem.

When you need to "react" to an event in SolutionItem from App but SolutionBox is in between, you will have to pass the event through SolutionBox to reach App.

Step 1

Add a prop to SolutionItem named onHover, which will be a callback function allowing any parent component to respond to changes.

function SolutionsSectionBoxItem({ solutionIMG, onHover }) {
  let callOnHover = state => {
    if (_.isFunction(onHover)) {
      onHover(state);
    }
  };

  return (
    <div className="solutions-section-item-box">
      <img
        src={solutionIMG}
        alt=""
        onMouseEnter={() => {
          callOnHover(true);
        }}
        onMouseLeave={() => {
          callOnHover(false);
        }}
        className="solutions-section-item-img"
      />
    </div>
  );
}

Step 2

Introduce a prop to SolutionBoxItem called onBGChanged, which again will be a callback function triggered upon any SolutionItem hover event. This function will accept a menuName string and pass the current or default menu name.

function SolutionsSectionBox({ onBGChanged }) {
  let callBGChanged = menuName => {
    if (_.isFunction(onBGChanged)) {
      onBGChanged(menuName);
    }
  };

  return (
    <div className="solutions-section-box-box">
      <SolutionItem
        solutionIMG={Ecommerce}
        onHover={state => {
          callBGChanged(state === true ? "Ecommerce" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={SalesMarketing}
        onHover={state => {
          callBGChanged(state === true ? "SalesMarketing" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={Analytics}
        onHover={state => {
          callBGChanged(state === true ? "Analytics" : "default");
        }}
      />
      <SolutionItem
        solutionIMG={Middleware}
        onHover={state => {
          callBGChanged(state === true ? "Middleware" : "default");
        }}
      />
    </div>
  );
}

Step 3

In the App component, listen for changes. Here, update the state whenever the mouse enters or leaves a solution item. To change the background, CSS is used to control the background URL. This might be challenging as different CSS classes would be required for each background type based on the bgImage state value.

    export default function App() {
  const [bgImage, setbgImage] = useState(E);

  const onBGChanged = menuName => {
    setbgImage(menuName);
  };

  return (
    <div className={`App ${bgImage === "default" ? "" : `App${bgImage}`}`}>
      <SolutionBox onBGChanged={onBGChanged} />
    </div>
  );
}

In CSS

Maintain the original App class and add an additional one based on the bgImage value, like 'AppEcommerce', 'AppSalesMarketing', etc., to update the background-image accordingly.

.AppEcommerce {
  background-image: url(https://placekitten.com/600/600);
}

.AppSalesMarketing {
  background-image: url(https://placekitten.com/500/800);
}

.AppAnalytics {
  background-image: url(https://placekitten.com/800/500);
}

.AppMiddleware {
  background-image: url(https://placekitten.com/700/700);
}

Extra

To ensure the incoming props are functions before calling them, lodash is added as a defensive measure. This practice is recommended for future-proofing the component.

let callBGChanged = menuName => {
    if (_.isFunction(onBGChanged)) {
      onBGChanged(menuName);
    }
  };

Answer 3

Answer №2

There are two approaches to resolving this issue. One involves passing down a function to update state, while the other utilizes useContext. In this scenario, using context is more appropriate because you are passing down a function across multiple components that do not need to be aware of it.

The first step is to make the background image dynamic in the styling of the div and leverage context:

// Define the context outside the component
export const BackgroundContext = React.createContext(null);

// -- code snippet
const [backgroundImage, setBackgroundImage] = useState(Ecommerce);
const updateBackgroundImage = newImage => setBackgroundImage(newImage);

// -- code snippet
<BackgroundContext.Provider value={updateBackgroundImage}>
  <div className="App" style={{ backgroundImage: `url(${backgroundImage})` }}>
  {/* -- code snippet */}
</BackgroundContext.Provider>

Now in your SolutionsSectionBoxItem component, you can import the background context:

import BackgroundContext from "../App";

Then, utilizing the context and React's mouseover API, you can update the selected background image:

  const setBackgroundImage = useContext(BackgroundContext);
  // -- snippet
  <img onMouseOver={() => setBackgroundImage(solutionIMG)} {/* -- snippet -- */} />

For further information, you can refer to: https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down

Answer 4

There are two approaches to resolving this issue. One involves passing down a function to update state, while the other utilizes useContext. In this scenario, using context is more appropriate because you are passing down a function across multiple components that do not need to be aware of it.

The first step is to make the background image dynamic in the styling of the div and leverage context:

// Define the context outside the component
export const BackgroundContext = React.createContext(null);

// -- code snippet
const [backgroundImage, setBackgroundImage] = useState(Ecommerce);
const updateBackgroundImage = newImage => setBackgroundImage(newImage);

// -- code snippet
<BackgroundContext.Provider value={updateBackgroundImage}>
  <div className="App" style={{ backgroundImage: `url(${backgroundImage})` }}>
  {/* -- code snippet */}
</BackgroundContext.Provider>

Now in your SolutionsSectionBoxItem component, you can import the background context:

import BackgroundContext from "../App";

Then, utilizing the context and React's mouseover API, you can update the selected background image:

  const setBackgroundImage = useContext(BackgroundContext);
  // -- snippet
  <img onMouseOver={() => setBackgroundImage(solutionIMG)} {/* -- snippet -- */} />

For further information, you can refer to: https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down

Modify the background of the parent component when hovering in ReactJS

Answer №1

Step 1

Step 2

Step 3

Extra

Answer №2

Similar questions

The resize function fails to trigger when it is required

Activating Vue-Bootstrap components through an image click event in VueJS 2

Amusing antics observed when hovering over a div in Firefox

Using gradient colors for the background on the ::selection pseudo-element

Tips for incorporating transition animations into route changes in next.js

Is it possible to override Material UI styles with css/scss?

Developing Reactive Selections with Material-UI is made easy

The appearance of the website varies across different web browsers

Text wrapped automatically to display multiple lines with spacing between each highlighted line

Utilize the id in AngularJS to bring attention to a specific row within a table

The appearance of HTML in JSP and CSS output in a Spring application is different from the local environment

Is there a way to achieve a straightforward three-column stacked layout in Bootstrap 5 that spans 100% of the viewport height?

Parenting and Child Components: Keeping the State in Sync

What are the steps to modify the text color in WKWebView?

When working with Web Workers in Jest, you may encounter an error stating "Cannot use 'import.meta' outside a module."

reactjs error: Attempting to utilize the toLowerCase method on an undefined property during double mapping

ReactJS requires HTTP server to transpile babel code before running

How do you determine the dimensions of a background image?

Modifying property values using the onError event when encountering an error with the MUI DateTimePicker and

Tips for setting background colors as a prop for Material UI cards in React JS