I'm currently working on creating a sample chat room application using reactjs and redux for educational purposes. In this scenario, there will be 3 users and the Message_01 component will be reused 3 times. Below is the code snippet:
const Main = React.createClass({
render() {
return (
<div className="parentContainer">
<Message_01 className="messageComponent" message={this.props.message} user="Bob" onMessageRemove={this.props.removeMessage} />
<Message_01 className="messageComponent" message={this.props.message} user="Kevin" onMessageRemove={this.props.removeMessage} />
<Message_01 className="messageComponent" message={this.props.message} user="Stuart" onMessageRemove={this.props.removeMessage} />
</div>
);
}
});
Message_01.js:
const Message_01 = React.createClass({
sendMessage() {
var msg = this.refs.msg.value;
this.props.onMessageSend(this.props.user, msg);
this.refs.msg.value = '';
},
keypress(event) {
if (event.keyCode == 13) this.sendMessage();
},
onDoubleClickEvent(index, msgID) {
var removeIcon = $('#' + msgID).find('.glyphicon-remove');
if (this.props.message[index].User == this.props.user) {
if (removeIcon.css('display') == 'none')
removeIcon.css('display', 'block');
else
removeIcon.css('display', 'none');
} else {
console.log('you cannot get remove icon');
}
},
removeMessage(index) {
this.props.onMessageRemove(index);
},
render() {
return (
<fieldset>
<legend>{this.props.user}</legend>
{this.props.message.map((msg, index) => {
return (
<div key={index}>
<div className="chatContainer">
<div className="msgArea" id={msg.ID} onDoubleClick={() => this.onDoubleClickEvent(index, msg.ID)}>
<b>{msg.User}: </b> {msg.Message} <span className="timeSpan">{msg.Time}</span> <span onClick={() => this.removeMessage(index)} style={{ display: 'none' }} className="glyphicon glyphicon-remove" />
</div>
</div>
</div>
)
})}
<div className="MessageTyper">
<input type="text" ref="msg" className="message_typer" onKeyDown={(event) => { this.keypress(event) }} />
<button className="send" onClick={this.sendMessage}> Send </button>
</div>
</fieldset>
);
}
});
The current code setup results in three message containers as shown in the image below:
In the code, when a user double-clicks on a message instance, a remove icon should appear next to the message. However, there seems to be an issue where if the 2nd or 3rd component is double-clicked, the remove icon appears in the first component instead (as depicted in the image below). This behavior is incorrect.
I would greatly appreciate any assistance with resolving this issue. Thank you in advance.