Found myself in the unique position unable to overcome this error, having looked at all forum posts usually a mapping of some sort. Using the npm pkg react-ui-cards which takes a list of objects to render some stats in the card, requiring the properties name and value.

I used a useEffect hook to fetch this data and store in the array of objects using useState.

Then pass this array of objects to the npm pgk component.

Link To npm pkg with component properties:

• https://www.npmjs.com/package/react-ui-cards?activeTab=readme

I know that when mapping you need a key, so I added property key, but not sure where I can use it to clear this pesky warning. Here is the code snippet:

import React from 'react'
import {
    UserCard
} from 'react-ui-cards';
import './InstallMain.css'
import {
    useEffect,
    useState
} from 'react';
import axios from 'axios';


function InstalllMain() {

    const [stat, setStats] = useState([{}])

    useEffect(() => {
        async function fetchData() {
            const result = await axios(
                'https://api.github.com/users/nikhilsurfingaus',
            );
            const arr = result.data
            const test = [{
                    key: '1',
                    name: 'Followers',
                    value: arr.followers,
                },
                {
                    key: '2',
                    name: 'Following',
                    value: arr.following,
                },
                {
                    key: '3',
                    name: 'Repos',
                    value: arr.public_repos,
                },
            ]
            setStats(test)

        }
        fetchData();

    }, []);


    return ( <
        >
        <
        div className = "head" >
        <
        h1 > Install Program Guide < /h1> < /
        div > <
        div className = "prof" >
        <
        UserCard float header = 'https://i.imgur.com/vRAtM3i.jpg'
        avatar = 'https://i.imgur.com/XJxqvsU.jpg'
        name = 'Nikhil Naik'
        positionName = 'Github Profile'
        stats = {
            stat
        }
        key = {
            stat.map(a => a.key)
        }
        /> < /
        div > <
        />
    )
}

export default InstalllMain

CodePudding user response：

Not sure about this, but shouldn't you map and render UserCard ? :

<div className="prof">
  {stat.map((a, i) => (
    <UserCard
      float
      header='https://i.imgur.com/vRAtM3i.jpg'
      avatar='https://i.imgur.com/XJxqvsU.jpg'
      name='Nikhil Naik'
      positionName='Github Profile'
      stats={a}
      key={i}
    />
  ))}
</div>

CodePudding user response：

[Solved]

Change:

    const [stat, setStats] = useState([{}])

To:

    const [stat, setStats] = useState([])

Not sure why the difference between an array and array of objects prompted this, but it cleared the error