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',
},
],
}