I use axios to fetch the data and pass the data as a prop to WatchHeader
export const WatchProfile = () => {
const [watch, setWatch] = useState([]);
let {id} = useParams();
let config = {
headers: {
'Content-Type': 'application/json',
}
}
useEffect(() => {
axios.get(`http://localhost:8000/api/stock/${id}`, config)
.then(response => {
setWatch(response.data)
})
.catch(error => {
console.log(error);
})
}, [])
return (
<Box>
<WatchHeader watch={watch} />
<LineChart/>
</Box>
)
}
I then use the data in my WatchHeader
function WatchHeader({watch}) {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const navigate = useNavigate();
const navigateHome = () => {
navigate('/')
}
const model = watch && watch.model || '';
const brand = watch && watch.brand || '';
const model_number = watch && watch.model_number || '';
const last_price = watch && watch.data[0] && watch.data[0].price || '';
console.log(last_price);
return (
<Box>
<Box display="flex" flexDirection="row" justifyContent="space-between" sx={{pl: 2, pt: 2, pr: 2}}>
<Box display="flex" flexDirection="column">
<Box display="flex" flexDirection="row" textAlign="left">
<Typography variant="h6" fontWeight="600"
sx={{color: colors.label[100]}}>{model}</Typography>
<Typography fontWeight="200"
sx={{color: colors.label[200], pl: 2, pt: 0.7}}>{brand}</Typography>
</Box>
<Box>
<Typography fontWeight="200" textAlign="left"
sx={{color: colors.gray[100], pl: 0, pt: 0.7}}>{model_number}</Typography>
</Box>
</Box>
<Box>
<MoreHorizIcon
aria-controls={open ? 'account-menu' : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
sx={{fill: '#65abe0', backgroundColor: colors.gray[500], borderRadius: '50%', p: 0.1, mr: 2}}/>
<CloseIcon onClick={navigateHome}
sx={{fill: '#636266', backgroundColor: colors.gray[500], borderRadius: '50%', p: 0.4}}/>
</Box>
</Box>
<Divider variant="middle" flexItem sx={{backgroundColor: colors.seperator[100], mt: 0.7}}/>
<Box>
<Box display="flex" flexDirection="column" textAlign="left" sx={{pl: 2, pt: 0.7}}>
<Box display="flex" flexDirection="row">
<Typography fontWeight="500" sx={{color: colors.red[100], pl: 2, mt: 0.7}}>{last_price}</Typography>
</Box>
<Typography fontWeight="200" sx={{color: colors.label[200]}}>Past Year</Typography>
<Typography fontWeight="200" sx={{color: colors.label[200]}}>USD</Typography>
</Box>
</Box>
<Divider variant="middle" flexItem sx={{backgroundColor: colors.seperator[100], mt: 0.7}}/>
<Box display="flex" flexDirection="row" textAlign="left" sx={{pl: 2, pt: 1.5}}>
<Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1D</Typography>
<Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1W</Typography>
<Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1M</Typography>
<Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>3M</Typography>
<Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>6M</Typography>
<Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>YTD</Typography>
<Typography fontWeight="200" sx={{color: colors.label[100], pr: 3}}>1Y</Typography>
</Box>
</Box>
)
}
export default WatchHeader
All of the data returns except for the nested data. See the data structure below:
{
"id": 290,
"brand": "Rolex",
"model": "Submariner",
"model_number": "16610",
"msrp": 6600,
"data": [
{
"price": 10911.2,
"date": "2024-08-14"
},
{
"price": 10911.2,
"date": "2024-08-13"
}
]
}
The error that occurs is
TypeError: Cannot read properties of undefined (reading '0')
And the error is resulting from this line in my WatchHeader
const last_price = watch && watch.data[0] && watch.data[0].price || '';
Of note, if I delete the line of code above and save it will refresh the page with no errors and when I paste it back in it displays properly.