'Uncaught TypeError: product is undefined Can't access my product user id Uncaught TypeError: Cannot read properties of undefined (reading '_id')

Am trying to set a link depending on what if a user created the post or not if he did creaedt it then an EDIT button appear else a report on does

        const userLogin = useSelector((state) => state.userLogin)
        const { userInfo } = userLogin
    
        const productDetails = useSelector (state => state.productDetails)

const {loading, error, product} = productDetails

            useEffect(() => {
                dispatch(listProductDetails(id))
                dispatch(listProducts())
        
              }, [dispatch, id])
        
              const [bid, setBid] = useState('')
        
        
              const submitHandler =(e) => {
                e.preventDefault()
                if (setBid > product.currentPrice + product.minIncrement){
                  dispatch(makeBid({bid, _id: id}))
                }else {
                  console.log("Bid isn't big enough")
                }
              }    
        
            return (
            <>
                <Link className='btn btn-dark my-3' to='/'>more</Link>
                   
        

the problem is here i can't access my data

{userInfo ?(userInfo.id===product._id&&(
                <Link className='ml-19' to={`/product/${product._id}/edit`}>EDIT</L`enter code here`ink>
                ))
                :userInfo?(userInfo.id !== product._id&&(
                  <Link to={`/product/${product._id}/report`}>REPORT</Link>
                )):
                
                (<></>)}
                {loading ? <Loader /> : error ? <Message variant='danger'>{error}</Message> 
                : (        
                  
                    <>
                    <Meta title={product.name} />
                    <Row>
                    <Col md={4} >
                        <Link className='link' to={`/profile/${product._id}`}>
                               <h5>Listing created by</h5> <h6>{/*product.user.name*/}</h6>
                        </Link>
                        <Image className='border border-primary' src={product.image} alt={product.name} fluid/>
               ....


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source