CODEWITHSUNDEEP
reactjsfunctiondictionaryreturnnext.js
Nitin
Nitin

Reputation: 598

map function isn't returning the values

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]

Upvotes: 1

Views: 374

Answers (3)

lazy.lizard
lazy.lizard

Reputation: 919

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>
);

Upvotes: 0

Fasani
Fasani

Reputation: 5749

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.

Upvotes: 2

ROOT
ROOT

Reputation: 11622

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>
    );
  })
}

Upvotes: 1

Related Questions