When trying to use `slug.current` in the link href(`/product/${slug.current}`), it seems to be undefined. However, when I try to log it to the console, it is displaying correctly

Question

When trying to use `slug.current` in the link href(`/product/${slug.current}`), it seems to be undefined. However, when I try to log it to the console, it is displaying correctly

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

the code mentioned above

javascript typescript next.js project

Answer 1

Answer №1

It seems like the value of slug is changing after the Product component has been rendered. To address this issue, you may consider not displaying anything until the value of slug is correct, which can be accomplished using 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(() => {
    // Logging the value of `slug` as it changes
    console.log('value of slug:', slug);
  }, [slug]);

  // Rendering nothing 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

Answer 2

It seems like the value of slug is changing after the Product component has been rendered. To address this issue, you may consider not displaying anything until the value of slug is correct, which can be accomplished using 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(() => {
    // Logging the value of `slug` as it changes
    console.log('value of slug:', slug);
  }, [slug]);

  // Rendering nothing 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

When trying to use `slug.current` in the link href(`/product/${slug.current}`), it seems to be undefined. However, when I try to log it to the console, it is displaying correctly

Answer №1

Similar questions

Angular Notification not visible

JavaScript Filter Function: filtering based on multiple conditions (either one can evaluate to true)

Develop a time-sensitive store system using HTML and JavaScript that toggles between open and closed status based on set

When navigating through a view in backbone.js, ensure to include an argument in the routing process

Transmit data in the form of a buffer

Enabling clients to access all static files from a Node.js + Express server

Don't delay in fulfilling and resolving a promise as soon as possible

Is it possible to extract the value from a switchMap observable instead of just receiving the observable itself?

What's the best way to mount a file on a field?

Guide on formatting the API response using a callback function in Angular development

What role does a promise play in rendering code asynchronous?

Retrieving information from a datatable in vb.net with an array

Remove all stored data from localStorage and update the view in Backbone framework

What is the process for deleting an animation using JavaScript, and how can the background color be altered?

What are the steps for accessing a server-side WebControl from the client side?

Determining the duration since generating a unique objectid in mongodb

Enhance TypeScript in WebStorm: Update or Upgrade the bundled version

Shuffling decks of cards among players at a table using JavaScript

Which one should you begin with: AngularJS or Angular 2?

standards for matching patterns (such as .gitignore)