How to keep button highlighted when clicked in React?

Question

I'm new to React and trying to figure out how to keep a button highlighted when clicked. The desired behavior would be like a form, where the user is asked a question, and can choose multiple answers to submit. Each answer (button) clicked would remain highlighted. Is there a way to achieve this effect?

<>
  <Stack gap={2} className="col-md-5 mx-auto">
    <h1>Question to ask user ?</h1>
    <br />
    <Button>Option 1</Button>
    <Button>Option 2</Button>
    <Button>Option 3</Button>
    <Button>Option 4</Button>
    <Button>Option 5</Button>
  </Stack>
</>

https://stackoverflow.com/questions/50769138/keep-a-list-item-highlighted-react-js Maybe this answers your question? — SecretTimes, Oct 08 '21 at 14:47

score 0 · Answer 1 · answered Oct 08 '21 at 14:50

0

I think you might be interested in something like the top answer for this post: How to keep :active css style after click a button. I think the JS answer they provided is what you're looking for, just don't include the remove class part.

answered Oct 08 '21 at 14:50

IneedHelp

43
5

Code without any explanation is useless. Can you elaborate on this a little more? – Toto Oct 08 '21 at 16:01

score 0 · Answer 2 · answered Oct 08 '21 at 14:51

Create the new component extending the Button and assign the state in it.

    class NewButton extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = {
                selected: null
            }
        }
    
        buttonSelected = selected => ev => {
            this.setState({ selected })
        }
    
        render() {
            return (
                <Button className={key === this.state.selected ? 'selected' : ''}>
                     {this.props}
                <Button>
    );
        }
    }

score 0 · Answer 3 · answered Oct 08 '21 at 15:04

If you just want to hightlight a button based when clicked you can use css selectors like :visited and :active depending upon the situation.

But what you are asking for requires something else, maybe you can use checkbox for this or you can use this

 class Form extends React.Component {
    state = {
        selected: [],
    };

    selectButton = (name) => {
        const tempSelected = { ...this.state.selected };
        tempSelected.push(name);
        this.setState({ selected: tempSelected });
    };
    isSelected = (name) => {
        return this.state.selected.includes(name);
    };

    render() {
        return (
            <>
                <button onClick={(e) => selectButton("A")} className={this.isSelected("A") ? "selected" : ""}>
                    A
                </button>
                <button onClick={(e) => selectButton("B")} className={this.isSelected("B") ? "selected" : ""}>
                    B
                </button>
                <button onClick={(e) => selectButton("C")} className={this.isSelected("C") ? "selected" : ""}>
                    C
                </button>
                <button onClick={(e) => selectButton("D")} className={this.isSelected("D") ? "selected" : ""}>
                    D
                </button>
            </>
        );
    }
}

I'm sure this is probably super simple, but how do I implement that? I put what you provided in a new file called Form.JS, but how do i now display it in my App.js? — yambo, Oct 08 '21 at 15:28
import it in your page component whichever one you are using(mostly `App.js` unless you are using `react-router-dom` in which case the page with route '/') and create a css class called `selected` and add the selectors mentioned above with different colors or borders to know its working — jainChetan81, Oct 08 '21 at 15:31

How to keep button highlighted when clicked in React?

3 Answers3