Appending a class with Click messes up the whole css

Question

I don't really know why transforming the X position while appending an additional class to make the slide effect isn't working as expected in React, as it does while using vanilla javascript. This is the code example

.inputModal {
  position: absolute;
  width: 500px;
  height: 150px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(25, 26, 26, 0.74);
  left: -8px;
  top: 30%;
  box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.5);
  transform: translateX(-93%);
  transition: all 0.3s ease-in-out;
} 

.InputModal.show {
transform: translateX(0px);
}

And the simple Component which should append the class show on button click

function InputModal() {
  const [toggleBtn, setToggleBtn] = useState(true);
  return (
    <div className={toggleBtn ? "inputModal" : "InputModal show"}>
      <Input />
      <div
        className="toggleBtn"
        onClick={() => {
          setToggleBtn(!toggleBtn);
        }}
      >
        <i className="fas fa-align-justify"></i>
      </div>
    </div>
  );
}

Once I click the toggle button(div) the show class is appended on to the div, but the div is losing all the previous set stylings and gets messed up

Does this answer your question? [How to add multiple classes to a ReactJS Component?](https://stackoverflow.com/questions/34521797/how-to-add-multiple-classes-to-a-reactjs-component) — Dejan.S, Apr 13 '21 at 12:08

score 1 · Accepted Answer · answered Apr 13 '21 at 12:08

1

You should append instead of change the classes, just like:

function InputModal() {
  const [toggleBtn, setToggleBtn] = useState(true);
  return (
    <div className={`inputModal ${toggleBtn ? "" : "InputModal show"}`}>
      <Input />
      <div
        className="toggleBtn"
        onClick={() => {
          setToggleBtn(!toggleBtn);
        }}
      >
        <i className="fas fa-align-justify"></i>
      </div>
    </div>
  );
}

answered Apr 13 '21 at 12:08

Vinicius Katata

932
3
7

However, this is far from the best practices using react IMHO – Vinicius Katata Apr 13 '21 at 12:10
what would be the best approach? – MoonSungKil Apr 13 '21 at 12:16
You could use the state to decide if you component should render or not. If you do that, it will only be at the DOM if needed – Vinicius Katata Apr 13 '21 at 12:20
Oh, I just realized what you want, in this case I don't think there is just another way to do it. Made a sandbox, take a look: https://codesandbox.io/s/festive-paper-rmrm5?file=/src/App.js:115-124 – Vinicius Katata Apr 13 '21 at 12:29

Appending a class with Click messes up the whole css

1 Answers1