Dynamically making a button active in React

Question

I'm trying to dynamically add an 'active' attribute to a button, but I'm really struggling with the logic. This is so I can tell users what filters are they currently applying during their search. I have two search capabilities a) search box/input and b) category btns.

I tried using pseudo-class : focus, but the class changes once a user clicks elsewhere on the page. Here is my code below for that specific component:

By the way, I'm using redux to manage the state, but I have a state in this component to manage the btns.

import React, { Component } from 'react';
import classes from './CatergoriesFilterSection.css';
import { connect } from 'react-redux';
import * as actions from '../../store/actions/index';

class CategoriesFilterSection extends Component {
    state = {
        buttons: [
            'Food-&-beverage',
            'Activity',
            'Transport',
            'Souvenirs',
            'other',
            'ALL',
        ],
    };

    render() {
        let btns = this.state.buttons.map((btn) => {
            return (
                <button
                    key={btn}
                    id={btn}
                    onClick={(e) => {
                        this.props.onClickedValueHandler(e);
                    }}
                    value={btn}
                    className={classes.Button}
                >
                    {btn}
                </button>
            );
        });

        return <div className={classes.ButtonsSection}>{btns}</div>;
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onClickedValueHandler: (event) =>
            dispatch(actions.categoryFilterHandler(event)),
    };
};

export default connect(null, mapDispatchToProps)(CategoriesFilterSection);

Are there any recommendations for this type of situation?

thanks!

Answer 1

You need to keep track of the selected button in your state, change the buttons data in the array to: {content: "Transport", active: false}

Then, on the onClickedValueHandler switch the true to one button to the other.

Also, I noticed that you are importing classes

What you do wanna do is either import the css file such as

Import './CatergoriesFilterSection.css';

Or use a css module(I recommend reading this https://programmingwithmosh.com/react/css-modules-react/)

Answer 2

Are you looking for something like this?

class Buttons extends React.Component {
  state = {
    selected: "",
    buttons: [
      "Food-&-beverage",
      "Activity",
      "Transport",
      "Souvenirs",
      "other",
      "ALL"
    ]
  };
  handleClick = name => {
    this.setState({ selected: name });
  };
  render() {
    const { buttons, selected } = this.state;
    return (
      <div>
        {buttons.map(btn => (
          <button
            key={btn}
            id={btn}
            onClick={() => this.handleClick(btn)}
            value={btn}
            className={selected === btn ? "btn isActive" : "btn"}
          >
            {btn}
          </button>
        ))}
      </div>
    );
  }
}

css

.btn {
  padding: 8px;
  border: none;
  margin: 5px;
  cursor: pointer;
}
.isActive{
  color: white;
  background: red;
}

Live working demo