Toggle CSS style in a function React component

Question

Every post or tutorial on how to toggle css in React assumes that I'm using a class component. However, I'm using a function component and don't have access to this and state. Can somebody tell me how to toggle a CSS style for a JSX element in a React function component?

import React from 'react';
import { Row, Container, Col } from 'react-bootstrap';

const FilterBar = ( {eventFilters, setEventFilters} ) => {
  

  const someFunction = () => {
      // code in here
  }  

  return(
    <div className="row-fluid" >
      <Container fluid >
        <Row className="justify-content-md-center mb-2 mt-2">
          <Col onClick={someFunction}> <button value="ALL"> All </button> </Col>   
          <Col onClick={someFunction}> <button value="WORKSHOP"> Workshop </button> </Col>        
          <Col onClick={someFunction}> <button value="MINIEVENT"> Minievent </button> </Col>        
        </Row>
        <Row className="justify-content-md-center mb-2">  
          <Col onClick={someFunction}> <button value="SPEAKER"> Speaker </button></Col>
          <Col onClick={someFunction}> <button value="MEAL"> Meal </button> </Col>
          <Col onClick={someFunction}> <button value="OTHER"> Other </button> </Col>     
        </Row>
      </Container>
    </div>
  );
}

export default FilterBar;

You do realize functional components can still be stateful, right? Do you have an example of some state you're trying to toggle in order to set some style/CSS (I.E. the state you need to toggle, and the CSS you're trying to use)? — Drew Reese
– Drew Reese, Commented Sep 24, 2020 at 1:57
@Drew Reese, sorry but I'm new to react. I'm trying to add a style to each button element when their clicked that just adds a line-through the text. Whenever I add this to my code, it says that it's undefined. — AsianTemptation
– AsianTemptation, Commented Sep 24, 2020 at 2:13
If you want to manage state inside a functional component, you should use React Hooks. — Zmen Hu
– Zmen Hu, Commented Sep 24, 2020 at 2:24

Drew Reese · Accepted Answer · 2020-09-24 02:28:24Z

Toggling some style via click event object. You can use the event target style property to change the current textDecoration property to "line-through" or nothing ("").

const toggleStrikethrough = (e) => {
  e.target.style.textDecoration =
    e.target.style.textDecoration === "line-through" ? "" : "line-through";
};

function App() {
  const toggleStrikethrough = (e) => {
    e.target.style.textDecoration =
      e.target.style.textDecoration === "line-through" ? "" : "line-through";
  };

  return (
    <div className="App">
      <div onClick={toggleStrikethrough}>ALL</div>
      <div onClick={toggleStrikethrough}>WORKSHOP</div>
      <div onClick={toggleStrikethrough}>MINIEVENT</div>
      <div onClick={toggleStrikethrough}>SPEAKER</div>
      <div onClick={toggleStrikethrough}>MEAL</div>
      <div onClick={toggleStrikethrough}>OTHER</div>
    </div>
  );
}

Note: This is generally frowned upon though and considered an anti-pattern as you are directly manipulating the DOM. The better and more react way is to maintain a toggled "state" in local component state for each element you want to toggle style (or anything really) of.

Collectives™ on Stack Overflow

Toggle CSS style in a function React component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related