CODEWITHSUNDEEP
reactjs
Santhosh
Santhosh

Reputation: 11774

How can I change the background color of elements when they're clicked?

I have a list of div elements in a ReactJS projects. I want to just get an indication when someone clicks change the background color.

the following is the basic code.


function changetoselected(event){
    // now change backgroundColor of
    // event.currentTarget to white
}

<div>
bigarrayofsize100plus.map((item,index) =>{
    return(
         <div 
            className="p-2" 
            onClick={(e) => changetoselected(e)} 
            style={{backgroundColor:"green"}}
         >
            .....
         </div>
    )
}
</div>

I dont want to store in the state all the elemets uncessarily. I dont have to trace clicked items here.

If once clicks i want to just change color. How can i do it

Upvotes: 1

Views: 3714

Answers (1)

fortunee
fortunee

Reputation: 4332

Use the style property to set a backgroundColor like this.

function changetoSelected(event){
    event.target.style.backgroundColor = '#fff'
}

You can also use Refs in React like this

For a Function Component do this `

import { useRef } from 'react';

function MyComponent() {
  const divEl = useRef(null);

  const changeToSelected = () => {
    divEl.current.style.backgroundColor = '#fff';
  };

  return (
      <div ref={divEl} onClick={changeToSelected}>
        ...
      </div>
  );
}

For a Class Component do this

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.divElement = React.createRef();
  }
  
  changetoselected = () => {
    this.divElement.current.style.backgroundColor = '#fff';
  }

  render() {
    return <div ref={this.divElement} onClick={this.changetoselected}>
        ...
      </div>;
  }
}

After all, working with pure dom (by ref or event) may not be what you are searching for, you can consider using react state and apply className or style to your dom elements

import { useState } from 'react';

const MyComponent = () => {
  const [backgroundColor, setBackgroundColor] = useState('green');

  return (
      <div 
        onClick={() => setBackgroundColor('white')} 
        style={{ backgroundColor }}
      >
        ...
      </div>
  );
}

EDIT

function MyComponent() {
  const divEl = useRef(null);

  const changeToSelected = () => {
    divEl.current.style.backgroundColor = '#fff';
  };

  return (
      <div>
         {bigarrayofsize100plus.map((item,index) =>
           <ChildComp
             key={index}
             item={item}
           >
              .....
           </div>
          )}
      </div>
  );
}

function ChildComp({ item }) {
  const divEl = useRef(null);

  const changeToSelected = () => {
    divEl.current.style.backgroundColor = '#fff';
  };

  return (
      <div
        ref={divEl}
        onClick={changeToSelected}
        className="p-2" 
        style={{backgroundColor:"green"}}
      >
        // do stuff with item heere
      </div>
  );
}

Upvotes: 1

Related Questions