The error occurs because the initial state of product is null, and you’re attempting to read the price property of null before the useEffect hook has a chance to update it.In this updated code, the component conditionally renders the price information only if product is not null. If product is null, it will render a “Loading…” message.

import React, { useEffect, useState } from 'react';
import PayMockup from '../PayMockup';
import { useParams } from 'react-router-dom';

export default function TotalPayMent() {
    const total = PayMockup;
    const [product, setProduct] = useState(null);
    const { userid } = useParams();
    console.log("userid", userid);

    useEffect(() => {
        const totalpay = total.order.products.find((product) => product.id == userid);
        console.log("totalpay", totalpay);
        setProduct(totalpay);
    }, [userid]);

    return (
        <div className='total-payment'>
            <p>최종 결제금액</p>
            {product ? (
                <div className='totalpay' key={product.id}>
                    <p className='price-title'>상품가격</p>
                    <p className="product-price">{product.price}</p>
                </div>
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
}

You are getting this error (The error Cannot read properties of null (reading 'price')) because product state is set to null initially

To resolve it, you can use conditional rendering to ensure that you only access product.price when product is set correctly.

import React, { useEffect, useState } from 'react';
import PayMockup from '../PayMockup';
import { useParams } from 'react-router-dom';

export default function TotalPayMent() {
  const total = PayMockup;
  const [product, setProduct] = useState(null);
  const { userid } = useParams();

  useEffect(() => {
    const totalpay = total.order.products.find((product) => product.id == userid);
    setProduct(totalpay);
  }, [userid]);

  if (!product) {
//NOTE You can return  fallback UI here maybe a loading compenent
    return <div>Loading...</div>; 
  }

  return (
    <div className='total-payment'>
      <p>최종 결제금액</p>
      <div className='totalpay' key={product.id}>
        <p className='price-title'>상품가격</p>
        <p className="product-price">{product.price}</p>
      </div>
    </div>
  );
}

The Error can also be handled as below:

• With Optional Chaining:

  <p className="product-price">{product?.price}</p>
  

• With Conditional Rendering:

  <p className="product-price">{product && product.price}</p>
  

I implemented it using conditional rendering and it was implemented well on the screen.

import React, { useEffect ,useState} from 'react';
import "../TotalPayMent/TotalPayMent.css"
import PayMockup from '../PayMockup';
import { useParams } from 'react-router-dom';



export default function TotalPayMent(){
    const total=PayMockup;
    const [product, setProduct] = useState(null);
    const {userid} =useParams()
    console.log("userid", userid);

    console.log("totalpay", total.order.products[0].price);

    useEffect(()=>{
     const totalpay = total.order.products.find((product) =>product.id == userid); 
     console.log("totalpay", totalpay);
        setProduct(totalpay)
    },[userid])

    return(
        <div className='total-payment'>
        <p className='total-title'>최종 결제금액</p>
        {product && ( 
          <div className='totalpay' key={product.id}>
            <p className='price-title'>상품가격</p>
            <p className="product-price">{product.price}원</p>
            <p className='product-coupone'>쿠폰할인</p>
            <p className='product-coupone'>{total.order.cupon}원</p>
            <p className=' product-point'>포인트 할인</p>
            <p className='product-point'>{total.order.point}원</p>
            <p className='delivery-peice'>배송비</p>
            <p className='delivery-peice'>{product.delivery}원</p>
            <div className='total'>
            <p className='total-payment'>총 결제금액</p>
            <p className='total-payment'>{product.totalprice}원</p>
        </div>
          </div>
        )}
      </div>
    )
}