React key warning on listing component, coming from the parent component

Question

Warning: Each child in a list should have a unique "key" prop. Check the render method of ForwardRef(ListItem). It was passed a child from RecipientsList.

I have traced it down on the react-components debugger chrome tool. I have put the key props on the component but the warning still comes up.

Parent Component (Recipient List)

 <List>
                            {recipientsResults.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((recipient, index) => (
                                <CustomList
                                    key={Math.random() * 10}
                                    title={recipient.account_holder_name}
                                    subtitle={recipient.summary}
                                    id={recipient.id}
                                    avatar={"true"}
                                    customClass={cx(styles.item)}
                                    avatarClass={cx(styles.avatar)}
                                    actions={[
                                        <span className={cx(styles.action)}>
                                             <Icon name="send" />
                                        </span>,
                                        <span className={cx(styles.action)}>
                                                <Icon name={`${index === selectedIndex ? 'caret-up' : 'caret-down'}`} color="#C4C4C4" onClick={() => {
                                                   if (index === selectedIndex) {
                                                       setSelectedIndex(null)
                                                   } else (
                                                       handleBeneficiaryClick(index)
                                                   )

                                                }} />
                                        </span>
                                    ]}
                                    collapsibleContent={
                                        <CollapsibleContent
                                            recipient={recipient}
                                            isOpen={index === selectedIndex}
                                            index={Math.random() * 10}
                                            onDelete={(id) => handleDelete(id)}
                                            onEdit={(id) => handleEdit(id)}
                                        />
                                    }
                                />
                            ))}
                        </List>
                    }

Child Component (Custom List)

 return (
        <>            
            <ListItem
                    secondaryAction={
                        actions && actions
                    }
                    className={`${customClass}`}
                    key={Math.random() * 10}
                >
                    {avatar &&
                    <ListItemAvatar>
                        <Avatar src={avatar} className={`${avatarClass}`}>
                            {getInitials(title)}
                        </Avatar>
                    </ListItemAvatar>
                    }
                    <ListItemText
                        primary={title}
                        secondary={subtitle ? subtitle : null}
                    />
                </ListItem>
                {collapsibleContent && collapsibleContent}
        </>
        )

Answer 1

1. remove this line

2. replace this with something like index or recipient.id. react needs a way to "associate" a key with an item from your array. this means by using a random you are telling react that the jsx is a different item derived from an item(given item = someArray[index]) for every render.

Answer 2

Can I ask why you're using math random for generating keys? Also see: Is it okay to use Math.random() for keys?. It is very likely the issue.. You can instead use your index argument, that you have on your map.

Answer 3

I finally got the answer, under Custom list component, i needed to change: this:

<>
</>

to:

<React.Fragment key={index}>
</React.Fragment>

Got it from: https://stackoverflow.com/a/68014086/4831770