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.

• nubinub: Well you need to move some logic in the higher component.
• Cat_Enthusiast: What does the parent component look like?
• akselrows: @ChristopherNgo I dont have parent component.
• Cat_Enthusiast: I mean, the component that is using Chat twice.
• akselrows: I just include it into other component like this, <Chat title={'Show Chat'}></Chat>

Answer 1

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:

1. User clicks one of the Chat buttons, triggering handleOpen()and we pass in the unique identifier....
2. That gets passed back up to the Parent, and now currentChatId should be updated with the identifier...
3. That currentChatId gets passed back down to the Chat component as the currentChatId prop...
4. 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