Error: setAllcategories is not a function

Viewed 15

Working currently with Nextjs and Sanity as Headless CMS for the backend part. As you can see down below I made a Categories.js file in components folder an trying to fetch some datas. I want to take out all the titles from the category Array. But always getting back the Error: setAllCategories is not a function.

UseState return an Array. And using .map I should be able to loop through that Array of Objects and pull out the titles i thought :)

So where is the buggy bug in there :)

import React, {useEffect, useState} from 'react';
import sanityClient from '../pages/client.js';

const Categories = () => {
  const {allCategories, setAllCategories} = useState(null);
  
  useEffect(() => {
  sanityClient.fetch(
    `*[_type == "category"]{
        title
    }`
  )
  .then((data) => setAllCategories(data))
  .catch(console.error);
  }, [])

  return (
    <div>
        <h2>Categories</h2>
        <div>
            {allCategories && 
                allCategories.map((category, index) => (
                    <p key={index}>{category.title}</p>
                ))}
        </div>
    </div>
  )
}

export default Categories

//category schema

export default {
  name: 'category',
  title: 'Category',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'description',
      title: 'Description',
      type: 'text',
    },
  ],
}

1 Answers

It's

const [allCategories, setAllCategories] = useState(null);

not

const {allCategories, setAllCategories} = useState(null);

useState returns an array not an object

Related