How to render reusable component one at a time in reactjs?

Question

I reuse the Chat component twice into another component. It display when you click Chat button but it overlaps each other.

class Chat extends React.Component {
        constructor() {
            super();
            this.state = {
                show: false, 
            };
        }
        reset = () => {
            this.setState(false);
        }
        open = () => { 
            this.setState({ show: true });
        }
        close = () => this.setState({ show: false });
        render() {
            return (<div className="chat">
                <button className="btn-yes round" onClick={this.open}>{this.props.title}</button>
                {this.state.show  && 
                <div className="show-chat">
                    <div className="chat-head">Now Chatting <i className="fas fa-angle-down" onClick={this.close}></i></div>
                    <div className="chat-body">
                        <div className="blue">Teresa wants to chat about her healthcare finances</div>
                        <ul>
                            <li><img src={agentPhoto} alt="chat agent avatar" /></li>
                            <li>
                                <h6>John Newman</h6>
                                <div className="gray">Hi Teresa!</div>
                                <div className="gray">Here is the <a href="/">link to the finance tool</a> we discussed.</div>
                                <div className="gray">If you have any questions, let me know!</div>
                            </li>
                        </ul>
                    </div>
                    <input placeholder="Type here and hit enter to chat"></input>
                </div>}
            </div>);
        }
    }

I expect to display chat one at a time. When I click the Chat button 2 and the Chat 1 is displayed, Chat 1 should be hidden.

I just include it into other component like this, <Chat title={'Show Chat'}></Chat> — akselrows
– akselrows, Commented Jul 3, 2019 at 9:06

Cat_Enthusiast · Accepted Answer · 2019-07-03 09:29:00Z

Essentially, you need to give each Chat component an identifier and keep track of the one that is currently opened.

Here is the basic structure for your Parent component:

class App extends React.Component {
  state = {
    currentChatId: null
  };

  handleOpen = id => {
    this.setState({
      currentChatId: id
    });
  };

  render() {
    return (
      <div>
        <Chat
          identifier={1}
          currentChatId={this.state.currentChatId}
          handleOpen={this.handleOpen}
        />
        <Chat
          identifier={2}
          currentChatId={this.state.currentChatId}
          handleOpen={this.handleOpen}
        />
      </div>
    );
  }
}

So notice, we give each Chat component an identifier prop. We will use identifier to update the active chat - which we stored as a value called currentChatId in our parent-state. That is all done through the handleOpen() event-handler, which we also pass down as a prop to Chat.

Now in your Chat component, we need to configure logic for open() and componentDidUpdate()

class Chat extends React.Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
  }

  componentDidUpdate(prevProps) {
    const { identifier, currentChatId } = this.props;

    if (this.props.currentChatId !== prevProps.currentChatId) {
      this.setState({
        show: identifier === currentChatId ? true : false
      });
    }
  }

  open = () => {
    const { identifier, handleOpen } = this.props;
    handleOpen(identifier);
  };
  render() {
    return (
      <div className="chat">
        <button className="btn-yes round" onClick={this.open}>
          {this.props.title}
        </button>
        {this.state.show && (
          <div className="show-chat">
            <div className="chat-head">
              Now Chatting{" "}
              <i className="fas fa-angle-down" onClick={this.close} />
            </div>
            <div className="chat-body">
              <div className="blue">
                Teresa wants to chat about her healthcare finances
              </div>
              <ul>
                <li>
                  <img src={""} alt="chat agent avatar" />
                </li>
                <li>
                  <h6>John Newman</h6>
                  <div className="gray">Hi Teresa!</div>
                  <div className="gray">
                    Here is the <a href="/">link to the finance tool</a> we
                    discussed.
                  </div>
                  <div className="gray">
                    If you have any questions, let me know!
                  </div>
                </li>
              </ul>
            </div>
            <input placeholder="Type here and hit enter to chat" />
          </div>
        )}
      </div>
    );
  }
}

Workflow:

User clicks one of the Chat buttons, triggering handleOpen()and we pass in the unique identifier....
That gets passed back up to the Parent, and now currentChatId should be updated with the identifier...
That currentChatId gets passed back down to the Chat component as the currentChatId prop...
Triggers componentDidUpdate() on all Chat components, and we check the currentChatId against their own identifiers, only one will be matching, so we display that one.

See codesandbox for working example: https://codesandbox.io/s/react-example-kgm2h

Collectives™ on Stack Overflow

How to render reusable component one at a time in reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related