Recibo este error dentro del bloque equipmentExercises mientras obtengo los datos de la API. Ya he comprobado el tipo de datos que es una matriz. Y equipmentExercises.length muestra un tipo de datos indefinido.
const SimilarExercises = ({ targetMuscleExercises, equipmentExercises }) => { console.log(equipmentExercises); return ( <Box sx={{ mt: { lg: '100px', xs: '0px' } }}> <Typography sx={{ fontSize: { lg: '44px', xs: '25px' }, ml: '20px' }} fontWeight={700} color="#000" mb="33px" > Similar <span style={{ color: '#FF2625', textTransform: 'capitalize' }}>Target Muscle</span> exercises </Typography> <Stack direction="row" sx={{ p: 2, position: 'relative' }}> {targetMuscleExercises.length !== 0 ? <HorizontalScrollbar data={targetMuscleExercises} /> : <Loader />} </Stack> <Typography sx={{ fontSize: { lg: '44px', xs: '25px' }, ml: '20px', mt: { lg: '100px', xs: '60px' } }} fontWeight={700} color="#000" mb="33px" > Similar <span style={{ color: '#FF2625', textTransform: 'capitalize' }}>Equipment</span> exercises </Typography> <Stack direction="row" sx={{ p: 2, position: 'relative' }}> **{equipmentExercises.length !== 0 ? <HorizontalScrollbar data={equipmentExercises} /> : <Loader />}** </Stack> </Box> ); };Esto se debe a que sus equipmentExercises y targetMuscleExercises pueden ser nulos en primer lugar.
Puede arreglar esto agregando una marca como esta: equipmentExercises?.length !== 0 o equipmentExercises && equipmentExercises.length !== 0
Podría estar pasando una cadena de una matriz, en lugar de una matriz. ¿Puedes validar con typeof ?
