Error while mapping the sanity schema in my react webiste

Question

I am trying to map a sanity schema, but I am unable to do so, please help me if any knows:

This is the sanity schema categories.js which I want to traverse, here I want to traverse the features array of image type which contains array of images

export default{
    name: 'categories',
    title: 'Categories',
    type: 'document',
    fields: [
        {
            name: 'category',
            title: 'Category (eg Clothing)',
            type: 'string',
        },
        {
            name:'features',
            title: 'Features',
            type: 'array',
            of: [
              {
                name:'featureimg',
                title: 'Feature Image',
                type:'image',
                options: {
                  hotspot: true,
                },
              },
            ]
          },
    ]
}

This is the react component product.js where I am traversing the array but I am not able to do so

import React, { useState, useEffect } from "react";
import { urlFor, client } from "../../client";

const Product = () => {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const query1 = '*[_type == "categories"] | order(title asc)';

    client.fetch(query1).then((data) => {
      setCategories(data);
      // console.log(categories[1].features.length);
      // console.log(urlFor(categories[1].features[1].featureimg));
    });
  }, []);

  return (
    <div>
      <div className="app__work-filter">
        {categories.map((item, index) => (
          <div key={index}>
            <div>
              {item.category}
              <div> **Main part where error is happening**
                {item.features.map((feature, index) => (
                  <img
                    src={urlFor(feature.featureimg)}
                    alt=" "
                    loading="lazy"
                  />
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Product;

This is the client.js which is being used for fetching content from sanity

import { createClient } from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = createClient({
  projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
  dataset: 'production',
  apiVersion: '2023-04-01',
  useCdn: true,
  token: process.env.REACT_APP_SANITY_TOKEN,
});

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source);

This is the error I am getting

Waning: The provided `src` attribute is an unsupported type ImageUrlBuilder. This value must be coerced to a string before before using it here.
 
Uncaught Error: Unable to resolve image URL from source (undefined)
    at urlForImage (urlForImage.ts:43:1)
    at ImageUrlBuilder.url (builder.ts:252:1)
    at ImageUrlBuilder.toString (builder.ts:257:1)
    at testStringCoercion (react-dom.development.js:259:

I already tried .url() option but it didn't work.

// console.log(categories[1].features.length);
// console.log(urlFor(categories[1].features[1].featureimg));

Both console log is working fine

I tried and tested everything, but I cannot get what I am missing, I have used the same logic of mapping in many places using the same client.js file in my same react app. But here, when I am mapping inside a mapping, I am getting this error. PLEASE HELP IF ANYONE KNOWS

Answer 1

urlFor function in client.js is returning an ImageUrlBuilder instance not a string.

Try to modify the urlFor to return a string instead of an ImageUrlBuilder instance, see if it solves your problem.

export const urlFor = (source) => builder.image(source).url();

Answer 2

          <div> **Main part where error is happening**
            {item.features.map((feature, index) => (
              <img
                src={urlFor(feature)}***
                alt=" "
                loading="lazy"
              />
            ))}
          </div>

I just remove the ".featureImg" and it worked, the subarray was just having a single item, so we don't need to traverse inside it, we can pass that whole array to the SANITY URLFOR