In my React app, I'm getting the following error but it doesn't tell me where it's happening. Any idea how I can pinpoint its location? The only place I have this.props.children
doesn't seem to make any sense for this error.
UPDATE: Here's the Timeline
component.
import React, { PropTypes } from 'react';
import PerfectScrollBar from 'react-perfect-scrollbar';
// Components
import TimelineEntry from './timelineEntry';
// Defaults
import { AvatarUrl } from '../../../../enum/defaults';
const Timeline = ({ member, conversationId, messages, activeMessageId, handleClickMessageSelected }) => {
return (
<div className=" height-100 padding-top-70">
<div className="padding-15" style={{ position: 'absolute', top: '0', left: '0' }}>
{typeof conversationId !== "undefined" && conversationId !== ""
? <div className="timeline-item-msg" id="msc-newConversationMessage">
<img src={member.avatar ? member.avatar.smallAvatarUrl : AvatarUrl.avatar} className="tim-image" />
<div className="tim-msg">
<div className="tim-msg-body cursor-pointer border-radius">
New Message
</div>
</div>
</div>
: null
}
</div>
<div className="height-100 position-relative padding-15">
<PerfectScrollBar>
{
messages.length > 0
? messages.map(item => <TimelineEntry key={item.id} entry={item} activeMessageId={activeMessageId} handleClickMessageSelected={handleClickMessageSelected} />)
: null
}
</PerfectScrollBar>
</div>
</div>
);
}
Timeline.PropTypes = {
member: PropTypes.object.isRequired,
conversationId: PropTypes.string.isRequired,
messages: PropTypes.array.isRequired,
activeMessageId: PropTypes.string.isRequired,
handleClickMessageSelected: PropTypes.func.isRequired
};
export default Timeline;
And this is the TimelineEntry
component:
import React, { PropTypes } from 'react';
// Defaults
import { AvatarUrl } from '../../../../enum/defaults';
// Utils
import { shortenTextToMaxCharacters } from '../../../../utils/string/stringUtils';
const TimelineEntry = ({ entry, activeMessageId, handleClickMessageSelected }) => {
let wrapperClass = 'timeline-item-msg';
if (entry.userFlag != 0)
wrapperClass += ' flag-' + entry.userFlag;
if (entry.id === activeMessageId)
wrapperClass += ' active';
return (
<div className={wrapperClass} id={'mst-' + entry.id} onClick={e => handleClickMessageSelected(entry.id)}>
<img src={entry.sender.avatarUrl ? entry.sender.avatarUrl : AvatarUrl.avatar} className="tim-image" />
<div className="tim-msg">
<div className="tim-msg-header">
{entry.sender.fullName} <br /><span className="opacity-6">{entry.messageTimeStamp.weekDay} {entry.messageTimeStamp.date} <i className="margin-right-40">{entry.messageTimeStamp.time}</i></span>
</div>
<div className="tim-msg-body cursor-pointer">
{shortenTextToMaxCharacters(entry.body.trim(), 75)}
</div>
</div>
</div>
);
}
TimelineEntry.PropTypes = {
entry: PropTypes.object.isRequired,
activeMessageId: PropTypes.string.isRequired,
handleClickMessageSelected: PropTypes.func.isRequired
};
export default TimelineEntry;
The PerfectScrollBar
component that you are using in your Timeline
component has a propType children: PropTypes.node.isRequired
. (Code at https://github.com/goldenyz/react-perfect-scrollbar/blob/master/src/scrollbar.js)
In the Timeline
component, when messages.length
is 0, you are rendering null
; which is causing no children
to render for PerfectScrollBar
, which in turn is giving the propType warning.
The workaround for this would be to render an empty div, <div></div>
instead of null
so that the propTypes of the PerfectScrollBar
are satisfied.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments