Error message : If you meant to render a collection of children, use an array instead React JS-CodePudding

I am having issue with my project. Everything works fine until i add the Navbar component to the skills one then i get the error message below. As soon as i remove Navbar from skill component everything runs just fine.

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead

Can someone tell me what i have done wrong, please?

Leo

Skills component

import { data } from '../../SkillData';
import SkillsList from "./SkillsList";
import Header from './Header';
import Navbar from './Navbar';
function Speakers () {
    return (
        <>
        <Navbar />
        <Header />
        <SkillsList data={data} />
        </>
    );
}

export default Speakers;

Navbar Component

import Image from "next";

const navbarData = [
    {   "id": "1",
        "title": "home",
        "ref": "#home"
    },
    {   "id":"2",
        "title": "Skills",
        "ref": "#skills"
    },
    {   "id":"3",
        "title": "The List",
        "ref": "#theList"
    },
    {   "id": "4",
        "title": "Team",
        "ref": "#team"
    },
    {   "id": "5",
        "title": "Contact",
        "ref": "#contact"
    },
];

function Navbar() {
    
    return (
        <>
            <nav className= "navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
                <div className="container">
                    <a className="navbar-brand" href="#page-top">
                        <Image src="./knowledge Memo.svg" alt="..." /></a>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                        Menu
                        <i className="fas fa-bars ms-1"></i>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarResponsive">
                        <ul className="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                            {navbarData.map((link, idx) => {

                                return (
                                    <li key={`Navbar${JSON.stringify(link)}`} data-index={idx} className="nav-item"><a className="nav-link" href={link.ref}>{link.title}</a></li>

                                );
                            })}
                        </ul>
                    </div>
                </div>
            </nav>
        </>
    );
}

export default Navbar;

index.js component

//import Head from 'next/head'
import Skills from '../src/components/Skills';

const Home = () => {

  return (    
   <Skills />
  );
}
export default Home;

header.js component

import styles from "../../styles/Home.module.scss";
const Header = () => {
    return (
      <header className={styles.masthead}>
              <div className={styles.container}>
                  <div className={styles.masthead_subheading}>React Jedi Road Map</div>
                  <div className={styles.masthead_heading , "text-uppercase"}>this is the way!</div>
                  <a className="btn btn-primary btn-xl text-uppercase" href="#services">Tell Me More</a>
              </div>
        </header>
     );
  }
  
  export default Header;

skilllist component

import Skill from "../components/Skill";
import styles from "../../styles/Home.module.scss";
import { data } from '../../SkillData';

function SkillsList () {
    return (
        <div className={styles.container, "container"}>
        <div className="row">
          {data.map(function (skillCard) {         
            return (
              <Skill key={skillCard.id} skillCard={skillCard} />
            )
          })}
  
        </div>
      </div>
    )
}

export default SkillsList;

CodePudding user response：

In Navbar component: I would think the JSON.stringify() for the key in your map function is synchronous, but try putting the index as the key to see if it resolves it.

CodePudding user response：

key={`Navbar${JSON.stringify(link)}`}

Very likely this is the problem. You can't make object a string, especially not with JSON.stringify() which returns JSON string from an object. Your data is already strinigified anyways. So, link is an object and it can't be just inserted into string like that. Rather use id or idx for keys since it anyways makes more sense as someone previously said.

CodePudding user response：

In Navbar component:

import Image from “next/image”

instead of

import Image from “next”

Also, make sure to specify width and height props on Image component. Or use layout=“fill”