CODEWITHSUNDEEP
javascriptreactjsnext.js
Mohamed
Mohamed

Reputation: 469

Next.js Link tag rendering on the page [object Object]

Hi I'm trying to make breadcrumbs for a page this is the breadcrumb array what it looks like:

const breadcrumbs = ['Home', "Men's Top", 'Winter Jacket']

so in JSX I'm trying to render this array using Next.js

import Link from "next/link";

const Breadcrumbs = (props) => {}

    const breadcrumbs = ['Home', "Men's Top", 'Winter Fur']

    return (
        <>
            <div style={{ height: "50px", paddingLeft: "30px" }}>
                {
                    `${
                        breadcrumbs.map((crumb, index, array) => {
                            if (crumb !== array[array.length - 1]) {
                                return (
                                        <Link href={index === 0 ? "/" : "/" + crumb}>
                                            {crumb}
                                        </Link> + " > "
                                    )
                            } else {
                                return <Link href={"/" + crumb}>{crumb}</Link>
                            }
                        }).join().replace(/,/g, "")

                    } `
                }
            </div>
        </>
    )
}

export default Breadcrumbs;

So this code renders on the page as [object Object] > [object Object] > [object Object]

But without including the Link tag I have Home > Men's Top > Winter Fur. Why is Link tag rendering on the page as [object Object] > [object Object] > [object Object]? What am I doing wrong as I really need the Link tag to switch between pages?

Upvotes: 0

Views: 756

Answers (1)

ArtemKh
ArtemKh

Reputation: 1000

Because you wrapped your Link components to the string. Remove ${ from your code

        <div style={{ height: "50px", paddingLeft: "30px" }}>
            {
               breadcrumbs.map((crumb) => {
                  return <Link href={"/" + crumb}>{crumb}</Link>
                }).join(' > ')
            }
        </div>

Upvotes: 1

Related Questions