hooks-two.js

const App = () => {
    constructor(props) {
        super(props);
        this.state = {
            open: true,
        };
    }

    const toggleDemo = () => {
        if (this.state.open) {
            this.setState({ open: false });
        } else {
            this.setState({ open: true });
        }
    };
    
//     componentDidMount() {
//         console.log('componentDidMount - rendered!');
//         channel.sendMessage({
//           text: 'Welcome to our customer chat with React Hooks tutorial!',
//         });
//     };

//     componentWillUnmount() {
//         console.log(`You have ${channel.state.messages.length} stored in local state. Goodbye!`);
//     };

    return (
        <div className={`wrapper ${this.state.open ? 'wrapper--open' : ''}`}>
            <Chat client={chatClient} theme={'commerce dark'}>
                <Channel channel={channel}>
                    <Window>
                        <ChannelHeader />
                        {this.state.open && (
                            <MessageList
                                typingIndicator={TypingIndicator}
                                Message={MessageCommerce}
                            />
                        )}
                        <MessageInput Input={MessageInputFlat} />
                    </Window>
                </Channel>
            </Chat>
            <Button onClick={this.toggleDemo} open={this.state.open} />
        </div>
    );
}