Why is Peer.Nick always undefined in LioWebRTC? - reactjs

Question

I'm using the liowebrtc react library to create a chat app. This library assigns a unique identifier (peer.id) to each peer (people not you in your chatroom). However, you can also assign yourself a nickname which then gets passed as peer.nick. At least, that's how it's supposed to work. But the peer.nick value always returns undefined, even though it's present in the Peer object. For instance, I pass a nickname to the Liowebrtc component as shown below:
<LioWebRTC
options={{ debug: true,
dataOnly: true,
nick: "Pippin" }}
onReady={join}
onCreatedPeer={handleCreatedPeer}
onReceivedPeerData={handlePeerData} >
If I print the peer object to console in handleCreatedPeer (the function that gets called when the app is informed of the presence of someone other than yourself in the chat room), I can see peer has a nick with value "Pippin." However, trying to call peer.nick or peer["nick"] always produces undefined.
For instance,
console.log("Peer id: ", peer.id); // valid value
console.log("Peer nick: ", peer.nick); // undefined
console.log("Peer one: ", peer.oneway); // valid value
even though if I print the Peer object in console, I can see:
Strangely though, I I print the keys of the Peer object in console, I see:
As you can see, nick is missing from the key list, even though it's there when you log the object in its entirety.
Why is peer.nick always undefined? Is there a different way I'm supposed to call it?
Here is the ChatWrapper class in its entirety:
// Code modified from https://medium.com/#leontosy/building-a-p2p-web-app-with-react-and-liowebrtc-6a7e8c621085
import React, { useState } from 'react';
import { LioWebRTC } from 'react-liowebrtc';
import ChatBox from './ChatBox';
const ChatWrapper = props => {
const [chatLog, setChatLog] = useState([])
const addChat = (name, message, alert = false) => {
setChatLog( chatLog => {
return [ ...chatLog,
{
name,
message: `${message}`,
timestamp: `${Date.now()}`,
alert
}
];
})
};
const join = (webrtc) => webrtc.joinRoom(props.roomID.toString());
const handleCreatedPeer = (webrtc, peer) => {
console.log(peer.nick)
addChat(`Peer-${peer.id.substring(0, 5)} joined the room!`, ' ', true);
}
const handlePeerData = (webrtc, type, payload, peer) => {
switch(type) {
case 'chat':
addChat(`Peer-${peer.id.substring(0, 5)}`, payload);
break;
default:
return;
};
}
return (
<div>
<p>Room: {props.roomID}</p>
<LioWebRTC
options={{ debug: true,
dataOnly: true,
nick: "Pippin"}}
onReady={join}
onCreatedPeer={handleCreatedPeer}
onReceivedPeerData={handlePeerData} >
<ChatBox
chatLog={chatLog}
onSend={(msg) => msg && addChat('Me', msg)}
/>
</LioWebRTC>
</div>
);
}
export default ChatWrapper;
and here is the ChatBox class in its entirety:
// Code from https://medium.com/#leontosy/building-a-p2p-web-app-with-react-and-liowebrtc-6a7e8c621085
import React, { Component } from 'react';
import './ChatBox.css';
import { withWebRTC } from 'react-liowebrtc';
class ChatBox extends Component {
constructor(props) {
super(props);
this.state = {
inputMsg: ''
};
}
generateChats = () => {
if(this.chatBox) {
setTimeout(() => { this.chatBox.scrollTop = this.chatBox.scrollHeight; }, 2);
}
return this.props.chatLog.map((item) => (
<div className="chat" key={`chat-${item.name}-${item.timestamp}`}>
<b className="name" style={{ color: item.alert ? '#888' : '#333' }}>{item.name}</b> <span className="msg">{item.message}</span>
</div>
));
}
handleSend = (chatMsg) => {
this.props.webrtc.shout('chat', chatMsg);
this.props.onSend(chatMsg);
}
handleKeyUp = (evt) => {
if (evt.keyCode === 13) {
this.handleSend(this.state.inputMsg);
this.setState({ inputMsg: '' });
}
}
handleInputChange = (evt) => this.setState({ inputMsg: evt.target.value });
render() {
const { chatLog } = this.props;
return (
<div className="container">
<div className="chatHeader">
<h1 className="title">P2P Chat Example</h1>
<hr />
</div>
<div className="chatBox" ref={(div) => this.chatBox = div}>
{chatLog.length ? this.generateChats() : (
<div className="info">
<p>To test this component out, open this page in a new tab or send it to a friend.</p>
</div>
)}
</div>
<hr />
<div className="bottomBar">
<input className="chatInput" type="text" placeholder="Type a message..." onKeyUp={this.handleKeyUp} onChange={this.handleInputChange} value={this.state.inputMsg} />
</div>
</div>
);
}
}
export default withWebRTC(ChatBox);