CODEWITHSUNDEEP
javascriptreactjs
Adrian
Adrian

Reputation: 86

Same component, multiple times used - applying different css styles

I want box to get coloured but only the one i click on and the rest should have default one. Then, when i click on the next one the previous box should go back to the default color. Currently, when i click on one of them, all of the boxes get unwanted background color. I know that i basically pass "color" prop to each of them so all get coloured because of the same prop and state. But how to do it properly with only one state and without changing prop name?

const {useState} = React;

const App = () => {
  const [color, setColor] = useState("");

  const firstBox = () => {
    setColor("firstBox");
  };

  const secondBox = () => {
    setColor("secondBox");
  };

  const thirdBox = () => {
    setColor("thirdBox");
  };

  return (
    <div className="container">
      <Box setColor={firstBox} color={color} />
      <Box setColor={secondBox} color={color} />
      <Box setColor={thirdBox} color={color} />
    </div>
  );
}


const Box = ({ setColor, color }) => {
  return (
    <div
      onClick={setColor}
      className={`box  ${
        color === "firstBox" || color === "secondBox" || color === "thirdBox"
          ? "active"
          : ""
      } 
        `}
    ></div>
  );
};


ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App/>
);
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: flex;
  gap: 2rem;
}

.box {
  width: 250px;
  height: 250px;
  background: lightblue;
}

.active {
  background: red;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Upvotes: 0

Views: 714

Answers (2)

CodeoftheWarrior
CodeoftheWarrior

Reputation: 363

Multiple ways to do this, but this is what I'd do:

const {useState} = React;

const App = () => {
  const [color, setColor] = useState("");

  return (
    <div className="container">
      <Box setColor={() => setColor('First Box')} selected={color === 'First Box'} />
 <Box setColor={() => setColor('Second Box')} selected={color === 'Second Box'} />
 <Box setColor={() => setColor('Third Box')} selected={color === 'Third Box'} />
    </div>
  );
}



const Box = ({ setColor, selected }) => {
  return (
    <div
      onClick={setColor}
      className={selected ? 'active box' : 'box'}
    />
  );
};


ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App/>
);

Upvotes: 1

user13937286
user13937286

Reputation:

Since you asked you didn't want to use any extra prop or state. All you have to do is change your Box component code to this,

const Box = ({ setColor, color }) => {
  return (
    <div
      onClick={setColor}
      className={`box ${setColor.name === color ? "active" : ""}
        `}
    ></div>
  );
};

Upvotes: 0

Related Questions