How to re-write the css class in React JS?

Question

For example, I have a css class in style sheet named 'track-your-order' now on some event trigger I have to update whatever in 'track-your-order' is and apply that updated class in same div. I am not meant to toggle it but I meant to update or change or replace the same css class with new values that a user will gives it to that div.

Answer 1

You can use the state update and a ternary operator.

className={isEventTriggered? "updated-track-your-order": "track-your-order"}

Answer 2

i think you can use StyledWrapper from npm styled-components module. so if you want to make 'track-your-order' become dynamic, you can simply create state that contain a new value of your css.

then put this inside your render:

const StyledWrapper = styled.div`
  ${this.state.newStyles}
`;

dont forget to wrap your affected element with <StyledWrapper></StyledWrapper> or just wrap all of your elements inside render. for more documentation: https://github.com/styled-components/styled-components

edit: also dont forget to include the name of your css class inside the state. your state more or less should be look like this .track-your-order:{display:block}