Manipulate React class names by adding or removing them

Question

Manipulate React class names by adding or removing them

Is there a way to toggle a className on click to change the style of a component?

I need to rotate an arrow to the right when it's clicked and hide all components next to it using display: none;.
I also require this functionality to work when the mobile breakpoint is reached.

Answer 1

Answer №1

let [isSpin, setSpin] = useState(false);

triggerSpin() {
 setSpin(true)
}

<button className={isSpin ? 'spin-effect' : ''} onClick={triggerSpin} />
{ !isSpin && <Element/>} // element will be hidden once button is clicked

This method is preferred over using display: none on other elements. However, if necessary, you can do this:

 <Element style={{ display: isSpin ? 'none': 'block' }} /> // It assumes default display style of the elements to be 'block'

Answer 2

let [isSpin, setSpin] = useState(false);

triggerSpin() {
 setSpin(true)
}

<button className={isSpin ? 'spin-effect' : ''} onClick={triggerSpin} />
{ !isSpin && <Element/>} // element will be hidden once button is clicked

This method is preferred over using display: none on other elements. However, if necessary, you can do this:

 <Element style={{ display: isSpin ? 'none': 'block' }} /> // It assumes default display style of the elements to be 'block'

Answer 3

Answer №2

To implement boolean state and a function to change the state, you can refer to this code snippet.

function App() {
  const [state, setState] = useState(true);

  const rotateHandler = () => {
    setState(() => !state);
  };

  return (
    <div className="App">
      {/* button for changing the state */}
      <button onClick={rotateHandler}>Click to rotate and hide</button>
      {/* icon for rotation */}
      <div>
        <FontAwesomeIcon
          icon={faAngleRight}
          style={{
            transform: state ? "rotate(90deg)" : "rotate(0deg)"
          }}
        />
      </div>
      {/* text to be hidden conditionally */}
      <div style={{ display: state ? " block" : "none" }}>
        <div>This text will be hidden when the state is false</div>
        <div>You can click the button</div>
        <div>to rotate the arrow icon</div>
        <div>and hide this text</div>
      </div>
    </div>
  );
}

You can also add conditions in className rather than inline styles as shown below:

className={state ? "show" : "hide"}

Answer 4

To implement boolean state and a function to change the state, you can refer to this code snippet.

function App() {
  const [state, setState] = useState(true);

  const rotateHandler = () => {
    setState(() => !state);
  };

  return (
    <div className="App">
      {/* button for changing the state */}
      <button onClick={rotateHandler}>Click to rotate and hide</button>
      {/* icon for rotation */}
      <div>
        <FontAwesomeIcon
          icon={faAngleRight}
          style={{
            transform: state ? "rotate(90deg)" : "rotate(0deg)"
          }}
        />
      </div>
      {/* text to be hidden conditionally */}
      <div style={{ display: state ? " block" : "none" }}>
        <div>This text will be hidden when the state is false</div>
        <div>You can click the button</div>
        <div>to rotate the arrow icon</div>
        <div>and hide this text</div>
      </div>
    </div>
  );
}

You can also add conditions in className rather than inline styles as shown below:

className={state ? "show" : "hide"}

Manipulate React class names by adding or removing them

Answer №1

Answer №2

Similar questions

Modify the text or background shade of the Bootstrap date picker

Troubleshooting problems with background-image in CSS using Javascript

What are the steps to fix a timeout error with React.js and socket.io acknowledgements?

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

Design an aesthetically pleasing chat interface using CSS styling

Altering the placement of a single element from floating to fixed positioning in CSS

When refreshing the token in Apollo GraphQL, the useQuery does not get automatically updated

What is the process for modifying a task on my to-do list with a long press?

What is the best way to align an element at the bottom in order to allow it to grow vertically

What is the best way to extract a single item from an array in Javascript and assign it to a different variable

Guide to transmitting a "token" to an "API" using "React"

Unable to reveal hidden text with invisible formatting (font-size: 0)

The function signature '() => void' cannot be assigned to a variable of type 'string'

Ways to connect images located outside of the Next.js project directory

Leveraging the power of context to fetch data from a store in a React component within the Next

Tips for Providing Real-Time Data for a Dynamic Chart in d3

When HTML elements are dynamically inserted through JavaScript using quilljs, they may cause conflicts with the layout properties

Ways to generate multiple void components side by side using React

populating all available space in layouts using bootstrap columns

Encountered an error trying to access property 'history' of an undefined value while using react-router v4 and create-react-app