React button component asks for key props-CodePudding

I've been coding a flexible button component where I pass some values by param (text, class, size, icon, and such) and when I do a condition (if it's a link or a button) before returning the HTML, it asks me for a key prop. Why is it asking for a key prop if it's not a list. I'm not even going through any array to return the value.

This is the React button component code:

import React from "react";
import "./button.css";

import { Icon } from '../Icon/icon';

const buttonTypes = [
    "button",
    "a"
];

const buttonClasses = [
    "app-button",
    "app-button-filled",
    "app-button-outlined",
    "app-button-icon"
];

const buttonSizes = [
    "app-button-large",
    "app-button-icon-large"
];

export const Button = ({
    buttonIcon = {
        name: '',
        style: '',
        position: ''
    },
    buttonText,
    buttonType,
    buttonTarget,
    buttonHref,
    buttonOnClick,
    buttonClass,
    buttonSize
}) => {

    const checkClasses = () => {
        if(buttonClasses.includes(buttonClass)){
            return buttonClasses[0] " " buttonClass;
        } else {
            return buttonClasses[0];
        }
    }

    const checkSizes = () => {
        if(buttonSizes.includes(buttonSize)){
            return buttonSize;       
        } else {
            return '';
        }
    }

    const checkTypes = () => {
        if(buttonTypes.includes(buttonType)){
            return buttonType;
        } else {
            return buttonTypes[0];
        }
    }

    const insertContent = () => {
        let content = [],
            iconTag = <Icon iconName={buttonIcon.name} iconStyle={buttonIcon.style} iconClass="app-button-svg" />;

        if(buttonClass === "app-button-icon"){
            content.push(iconTag);
        } else {
            if(buttonText){ content.push(<span className="app-button-text">{buttonText}</span>); }
            
            if(buttonIcon){
                if(buttonIcon.position === "left"){
                    content.unshift(iconTag);
                } else if(buttonIcon.position === "right" || buttonIcon.position !== "left") {
                    content.push(iconTag);
                }
            }
        }

        return content;
    }

    if(checkTypes() === "button"){
        return (<button className={`${checkClasses()} ${checkSizes()}`} onClick={buttonOnClick}>{insertContent()}</button>);
    } else if(checkTypes() === "a"){
        return (<a className={`${checkClasses()} ${checkSizes()}`} href={buttonHref} target={buttonTarget} >{insertContent()}</a>);
    }
}

Warning code:

Warning: Each child in a list should have a unique "key" prop | button.js:84

CodePudding user response：

The condition for this trigger is passing an array in the list of children.

You are doing this near the end:

return (<button className={`${checkClasses()} ${checkSizes()}`} onClick={buttonOnClick}>{insertContent()}</button>);
...
return (<a className={`${checkClasses()} ${checkSizes()}`} href={buttonHref} target={buttonTarget} >{insertContent()}</a>);

Your children here are the result of insertContent(), which returns an array. Because it returns an array, it triggers the warning because no keys are specified.

To solve this, you need to change the function insertContent to include keys on the elements it puts into the content array