I'm trying to useState in my MERN project, and I have defaultSize defined in MongoDB, and am trying to useState by product.defaultSize. If I change some of my code (like adding console.log("hello")) and save it, the error disapears and loads fine. But if I refresh the page the error comes back?
import { useEffect, useState } from "react";
import { getProductDetails } from "../redux/actions/productActions";
import { SizeOptions } from '../components/SizeOptions';
const ProductScreen = ({match}) => {
const dispatch = useDispatch();
const productDetails = useSelector(state => state.getProductDetails);
const { loading, error, product } = productDetails;
const [ src, setSrc ] = useState(product.defaultSize);
useEffect(() => {
if (product && match.params.id !== product._id) {
dispatch(getProductDetails(match.params.id));
}
}, [dispatch, match, product]);
<div className='sizebuttons'>
{product && (product.size || []).map((size, index) => (<SizeOptions key={index} size={size} changeSrc={src => setSrc(src)}/>))}
</div>
return (
<model-viewer
id="model-viewer"
src={src}
alt={product.productName}
ar
ar-modes="scene-viewer quick-look"
ar-placement="floor"
shadow-intensity="1"
camera-controls
min-camera-orbit={product.mincameraorbit}
max-camera-orbit={product.maxcameraorbit}
interaction-prompt="none">
<button slot="ar-button" className="ar-button">
View in your space
</button>
</model-viewer>
)};I've tried also changing it to useState(product?.defaultSize); as I saw another post on here saying that could work, but I had no luck with it. And as you can tell, all the other product.otherstuff works just fine. Any help would be greatly appreciated!
import { useEffect, useState } from "react";
import { getProductDetails } from "../redux/actions/productActions";
import { SizeOptions } from '../components/SizeOptions';
const ProductScreen = ({match}) => {
const dispatch = useDispatch();
const productDetails = useSelector(state => state.getProductDetails);
const { loading, error, product } = productDetails;
const [ src, setSrc ] = useState();
useEffect(() => {
if (product && match.params.id !== product._id) {
dispatch(getProductDetails(match.params.id));
}
}, [dispatch, match, product]);
<div className='sizebuttons'>
{product && (product.size || []).map((size, index) => (<SizeOptions key={index} size={size} changeSrc={src => setSrc(src)}/>))}
</div>
return (
<model-viewer
id="model-viewer"
src={src || product.defaultSize}
alt={product.productName}
ar
ar-modes="scene-viewer quick-look"
ar-placement="floor"
shadow-intensity="1"
camera-controls
min-camera-orbit={product.mincameraorbit}
max-camera-orbit={product.maxcameraorbit}
interaction-prompt="none">
<button slot="ar-button" className="ar-button">
View in your space
</button>
</model-viewer>
)};