Show / hide based on button state

Question

I am trying to create an accordion style button and configure my component using the button functionality to hide my list when clicked, but I am not returning to the list and also want to add an animated transition between hiding / showing the list. Should I use prevStatein my function handleClick()? Is there a preferred animation processing method? To 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>
        );
    }
}

Answer 1

I think I found your problem. In your handleClick method, you change the state to false to hide your list. When you press the button again to display the list, all they do is set the status to false again. Flip the state as follows:

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

: . , , setState , , .

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

, CSS. . , react-motion. , .