Is there a way to adjust the background hues of a React component when a click event is triggered?

Question

Is there a way to adjust the background hues of a React component when a click event is triggered?

Currently, I have 3 React components that each consist of a div element. When I click on one component, I want to change its background color to black. If I then select another component, the previously selected component should return to its normal background color. What is the best way to accomplish this dynamic behavior?

css reactjs

Answer 1

Answer №1

Here's an uncomplicated solution:

.App {
  display: flex;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 20px;
}

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

export default function App() {
  const [bg, changeBGColor] = React.useState(1);
  return (
    <div className="App">
      <div
        className="box"
        onClick={() => changeBGColor(1)}
        style={{
          backgroundColor: bg === 1 ? "black" : "red"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(2)}
        style={{
          backgroundColor: bg === 2 ? "black" : "yellow"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(3)}
        style={{
          backgroundColor: bg === 3 ? "black" : "green"
        }}
      />
    </div>
  );
}

Copy and paste this code into Codesandbox to view the result.

In this example, I'm utilizing a React hook that takes a unique id as input. If set, the corresponding component will appear in black.

Therefore, the first div is initially black. When I click on the second div, the value of bg changes to 2 and in the style, I check if 2 is selected then set the color to black. The same process applies to the third div.

Answer 2

Here's an uncomplicated solution:

.App {
  display: flex;
}

.box {
  width: 150px;
  height: 150px;
  margin: 20px;
  padding: 20px;
}

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

export default function App() {
  const [bg, changeBGColor] = React.useState(1);
  return (
    <div className="App">
      <div
        className="box"
        onClick={() => changeBGColor(1)}
        style={{
          backgroundColor: bg === 1 ? "black" : "red"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(2)}
        style={{
          backgroundColor: bg === 2 ? "black" : "yellow"
        }}
      />
      <div
        className="box"
        onClick={() => changeBGColor(3)}
        style={{
          backgroundColor: bg === 3 ? "black" : "green"
        }}
      />
    </div>
  );
}

Copy and paste this code into Codesandbox to view the result.

In this example, I'm utilizing a React hook that takes a unique id as input. If set, the corresponding component will appear in black.

Therefore, the first div is initially black. When I click on the second div, the value of bg changes to 2 and in the style, I check if 2 is selected then set the color to black. The same process applies to the third div.

Answer 3

Answer №2

If each of those elements possess their distinctive characteristics (or if they do not, you should include them), you are able to adjust their className using className={this.state.selectedComponent==="uniqueID" ? "activeClassName" : ""}, while also having a state attribute (selectedComponent) that is assigned with the unique property upon onClick event.

Answer 4

If each of those elements possess their distinctive characteristics (or if they do not, you should include them), you are able to adjust their className using className={this.state.selectedComponent==="uniqueID" ? "activeClassName" : ""}, while also having a state attribute (selectedComponent) that is assigned with the unique property upon onClick event.

Answer 5

Answer №3

import React, { Component } from 'react'

export default class CustomComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      background: 'blue'
    }
    this.changeBackground = this.changeBackground.bind(this)
    this.changeBackground2 = this.changeBackground2.bind(this)
  }

  changeBackground() {
    this.setState({
      background: 'yellow'
    })
  }

  changeBackground2() {
    this.setState({
      background: 'purple'
    })
  }

  render() {
    return (
      <div style={{ backgroundColor: this.state.background }}>
        <button onClick={this.changeBackground} />
        <button onClick={this.changeBackground2} />
      </div>
    )
  }
}

This method provides a basic way to customize the background color of a div element. Initially set to blue, clicking the first button changes it to yellow and the second button to purple.

This concept can be applied for various purposes in your projects.

Answer 6

import React, { Component } from 'react'

export default class CustomComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      background: 'blue'
    }
    this.changeBackground = this.changeBackground.bind(this)
    this.changeBackground2 = this.changeBackground2.bind(this)
  }

  changeBackground() {
    this.setState({
      background: 'yellow'
    })
  }

  changeBackground2() {
    this.setState({
      background: 'purple'
    })
  }

  render() {
    return (
      <div style={{ backgroundColor: this.state.background }}>
        <button onClick={this.changeBackground} />
        <button onClick={this.changeBackground2} />
      </div>
    )
  }
}

This method provides a basic way to customize the background color of a div element. Initially set to blue, clicking the first button changes it to yellow and the second button to purple.

This concept can be applied for various purposes in your projects.

Is there a way to adjust the background hues of a React component when a click event is triggered?

Answer №1

Answer №2

Answer №3

Similar questions

Activate the div when hovering over the span

Looking to make an API call with every keystroke in a React application, however, the response may contain a large number of objects

Is it achievable to modify the appearance of the "Saved Password" style on Firefox?

The JSON parser encountered an unexpected end while parsing near the section related to "jscs" and "moch"

Encountering the error message "TypeError: Unable to access properties of null (reading 'get')" while utilizing useSearchParams within a Storybook file

Manipulating the location where a dropdown menu intersects with a button

Tips for including a for loop within a return statement in React Native

How can I incorporate the 'client' application into the 'loading.js' file?

I encountered an issue when trying to include the dotenv file, receiving the following error message: [TypeError: Network request failed]

Can you provide a tutorial on creating a unique animation using jQuery and intervals to adjust background position?

Redux and React: Uncaught Error (TypeError): Unable to access the 'push' property because it is undefined

I am in need of help with coding so that my entire webpage is displayed properly even when I resize it to the smallest width. Additionally, I need assistance with making

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

What is the best way to activate a function when the route is changed?

What is the best way to implement the Active list element feature in my menu bar?

Closing a batch file after the React app is shut down can be achieved by utilizing a

Create an input box with a designated class

Transitioning to Material-ui Version 4

Is there a way to ensure the collapsible item stays in its position?

I'm unable to adjust the font size of the final h3 element