Show/Hide Based on Button State

Question

I'm trying to create an accordion style button and have setup my component with the button functionality to hide my list on click, but I the list does not reappear and would also like to add an animated transition between hiding/showing the list. Should I be using prevState in my handleClick() function? Is there a preferred method for handling the animation? React? CSS?

//Render Links
const ReportLinks = props => {
    return (
        <ul>
            { 
                props.links.map((link, index) => {
                return ( <li key={index}><a href={link.reportLink}>{link.reportLink}</a></li> )
                })
            }
        </ul>
    )
}


class Footer extends React.Component {
    constructor(props){
        super(props);
        this.state = { linksHidden: true };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        this.setState({ linksHidden: false });
    }

    render() {
        return (
            <div className="annotation-card__footer">
                <button onClick={this.handleClick}>Report Links ({this.props.report.length})</button>
                { this.state.linksHidden ? <ReportLinks links={this.props.report}/> : null }
            </div>
        );
    }
}

I updated my answer to fix your problem.

Funk Soul Ninja
– Funk Soul Ninja

2017-10-18 01:03:09 +00:00
Commented Oct 18, 2017 at 1:03 — Funk Soul Ninja
– Funk Soul Ninja, Commented Oct 18, 2017 at 1:03

Funk Soul Ninja · Accepted Answer · 2017-11-08 16:23:00Z

1

I think I found your problem. In your handleClick method, you change the state to false to hide your list. When one presses the button again to show the list, all they are doing is setting the state to false again. Flip the state like this:

handleClick() {
  this.setState({ linksHidden: !this.state.linksHidden });
}

EDIT: Felix Kling is correct. The code above is okay for simple applications, but when your app becomes more complex and setState can be called many times in a small amount of time it would be best to use a function as Felix Kling stated.

handleClick() {
  this.setState(state => ({ ...state, linksHidden: !state.linksHidden }));
}

As for the animation, you could use CSS transitions. Just add or remove a class when the state changes. If you want more control, try using react-motion. I don't any experience with it, but it doesn't look too difficult to use.

edited Nov 8, 2017 at 16:23

answered Oct 18, 2017 at 0:32

Funk Soul Ninja

2,2034 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Kling Over a year ago

Better would be to pass a function to setState to ensure that you are always working with the latest state: this.setState(state => this.setState({linksHidden: !state.linksHidden}));.

Collectives™ on Stack Overflow

Show/Hide Based on Button State

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related