-1

learning how to build a blog with nextjs and graphCMS, been able to get some content using gql queries but for no understandable reason, i can't seem to render the categories.name content onto the site and I am not getting an error. i would like to know what the problem is as I have encountered this prior to this moment with the sanity.io platform for an e-commerce project.

import React, { useState, useEffect } from 'react'

import Link from 'next/link'

import { getCategories } from '../services'

const Categories = () => {

const [categories, setCategories] = useState([]);

useEffect(() => {

getCategories()

    .then((newCategories) => setCategories(newCategories))

}, []);

return (

<div className='bg-white shadow-lg rounded-lg p-8 mb-12'>

  <h3 className='text-xl mb-8 font-semibold border-b pb-4'>

    Categories

  </h3>

  {categories.map((category) => {

    <Link key={category.slug} href={`/category/${category.slug}`}>

      <span className='cursor-pointer block pb-3 mb-3'>

        {category.name}

      </span>

    </Link>

  })}

</div>

below is the query that I used to set up the process for rendering the content I need to display on the site

export const getCategories = async () => {

const query = gql`

    query GetCategories {

        categories {

            name

            slug

        }

    }

`

const result = await request(graphqlAPI, query);

return result.categories;

}

wilcardcharly
  • 29
  • 2

2 Answers2

0

Assuming you are getting data and the state is correct, you're missing return in your map

{categories.map((category) => {

 // notice this return keyword!!
   return <Link key={category.slug} href={`/category/${category.slug}`}>

      <span className='cursor-pointer block pb-3 mb-3'>

        {category.name}

      </span>

    </Link>

  })}
Mahaveer
  • 435
  • 4
  • 14
0

figured it out, had to change {} to () after the .map element and =>

wilcardcharly
  • 29
  • 2