array jsx element need key attr
yongsheng-xia opened this issue Β· comments
Hi! π
Firstly, thanks for your work on this project! π
Today I used patch-package to patch react-chat-elements@12.0.5
for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx b/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx
index 5cb808a..b34db05 100644
--- a/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx
+++ b/node_modules/react-chat-elements/src/ChatItem/ChatItem.tsx
@@ -71,7 +71,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
<div className='rce-citem' onDragOver={onDragOver} onDragEnter={onDragEnter} onDragLeave={onDragLeave} onDrop={onDrop}>
{!!props.onDragComponent && onDrag && props.onDragComponent(props.id)}
{((onDrag && !props.onDragComponent) || !onDrag) && [
- <div className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
+ <div key={'avatar'} className={classNames('rce-citem-avatar', { 'rce-citem-status-encircle': statusColorType === 'encircle' })}>
<Avatar
src={props.avatar}
alt={props.alt}
@@ -103,7 +103,7 @@ const ChatItem: React.FC<IChatItemProps> = ({
type={classNames('circle', { 'flexible': avatarFlexible })}
/>
</div>,
- <div className='rce-citem-body'>
+ <div key={'rce-citem-body'} className='rce-citem-body'>
<div className='rce-citem-body--top'>
<div className='rce-citem-body--top-title'>{props.title}</div>
<div className='rce-citem-body--top-time'>{date && (props.dateString || format(date))}</div>
This issue body was partially generated by patch-package.
<div key={'rce-citem-body'} className='rce-citem-body'>
Not working. Don't have key unique