slug.current is not working (slug.current is undefined but when i am doing console.log like this its showing

Question

import React from 'react';
import Link from 'next/link';

import { urlFor } from '../lib/clients';

const Product = ({ product: { image, name, slug, price } }) => {
  return (
    <div>
      <Link href={`/product/${slug.current}`}>
        <div className="product-card">
          <img 
            src={urlFor(image && image[0])}
            width={250}
            height={250}
            className="product-image"
          />
          <p className="product-name">{name}</p>
          <p className="product-price">${price}</p>
        </div>
      </Link>
    </div>
  )
}

export default Product

here is the code

Answer 1

It appears as though the value of slug changes after the Product component has been rendered. For this, you might want to not display anything until the value of slug is correct, which you can achieve with a React effect hook.

import React, { useEffect } from 'react';
import Link from 'next/link';

import { urlFor } from '../lib/clients';

const Product = ({ product: { image, name, slug, price } }) => {

  useEffect(() => {
    // This logs the value of `slug` as it changes
    console.log('value of slug:', slug);
  }, [slug]);

  // This means that nothing is rendered if `slug` is undefined
  if (!slug) return null;

  return (
    <div>
      <Link href={`/product/${slug.current}`}>
        <div className="product-card">
          <img 
            src={urlFor(image && image[0])}
            width={250}
            height={250}
            className="product-image"
          />
          <p className="product-name">{name}</p>
          <p className="product-price">${price}</p>
        </div>
      </Link>
    </div>
  )
}

export default Product