1

I am trying to return the categories in nextjs component which I have stored in the database. I am using map function to return but it is not working.

const showAllCategories = () =>{
      return  categories.map((c,i)=>{
                <Link  key={i} href ={`/categories}`} >
                    <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name }</a>
                </Link>
        })
    }

Im trying to return the categories name inside the section tag of html

<section>
                            {/* <p>Show categories and tags</p> */}
                            <div className="pb-5">
                                    {JSON.stringify(showAllCategories())}
                                {showAllCategories()}
                                {showAllTags()}

                            </div>
                        </section>

I tried debugging using JSON.stringyfy but it shows [null,null,null,null,null,null,null,null]

Nitin
  • 578
  • 3
  • 14

3 Answers3

2

As others have said you are missing the return keyword.

ES6 you can return things in one line by omitting the open bracket {. Which I think causes confusion for many people. Take these 2 examples.

categories.map((c, i) => c.name);

The above auto returns c.name.

categories.map((c, i) => { return c.name; });

Which is the same as this but as soon as you open the brackets { you need a return inside it.

Fasani
  • 5,141
  • 1
  • 23
  • 24
1

You are missing the return keyword, it should be like this:

const showAllCategories = () => {
  return  categories.map((c,i)=> {
      return (<Link  key={i} href={`/categories}`} >
          <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name }</a>
      </Link>
    );
  })
}
ROOT
  • 11,363
  • 5
  • 30
  • 45
0
const showAllCategories = () => {
  return categories.map((c, i)=> {
    // you forgot return here
    return (
            <Link  key={i} href ={`/categories}`} >
                <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name }</a>
            </Link>
       )
    })
}

or a bit shorter -

const showAllCategories = () => categories.map((c, i) => (
    <Link key={i} href={`/categories}`}>
        <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name}</a>
    </Link>
);
lazy.lizard
  • 834
  • 6
  • 11