There seems to be an issue with infinite looping in this code, and I can't figure out the cause,
import React, { useEffect, useState } from 'react';
import VideoCardComponent from './VideoCard';
import Grid from '@mui/material/Grid';
import { connect } from 'react-redux';
import { getVideos } from '../redux/actions/videosActions&Consts';
import { Typography } from '@mui/material';
const Content = ({ getVideos, videos, loaded }) => {
const [ currentGroup, setCurrentGroup ] = useState('');
const [ printCurrentGroup, setPrintCurrentGroup ] = useState(true);
const [ firstTime, setFirstTime ] = useState(true);
useEffect(() => {
if (!loaded) {
getVideos();
}
}, []);
const getVideoCard = (videoObj) => {
console.log(videoObj);
if (firstTime) {
setFirstTime(false);
setCurrentGroup(videoObj.category_name);
} else {
if (videoObj.category_name !== currentGroup) {
setPrintCurrentGroup(true);
setCurrentGroup(videoObj.category_name);
} else {
if (printCurrentGroup) setPrintCurrentGroup(false);
}
}
return (
<Grid item xs={4}>
{printCurrentGroup ? <Typography variant="h4">{videoObj.category_name}</Typography> : null}
<VideoCardComponent {...videoObj} />
</Grid>
);
};
console.log('videos: ', videos);
return (
<Grid container spacing={1}>
{videos.map((videoObj) => {
return getVideoCard(videoObj);
})}
</Grid>
);
};
function mapStateToProps(state) {
return {
videos: state.videosReducer.videos,
loaded: state.videosReducer.loaded
};
}
function mapDispatchToProps(dispatch) {
return {
getVideos: () => {
return dispatch(getVideos());
}
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Content);
The Videos variable is essentially an array containing 7 objects. The issue surfaces when manipulating the state variables.
if (firstTime) {
setFirstTime(false);
setCurrentGroup(videoObj.category_name);
} else {
if (videoObj.category_name !== currentGroup) {
setPrintCurrentGroup(true);
setCurrentGroup(videoObj.category_name);
} else {
if (printCurrentGroup) setPrintCurrentGroup(false);
}
}
Below is the segment of code leading to rendering this component:
<Provider store={configStore}>
<Grid container direction="column">
<Grid item>
<Header />
</Grid>
<Grid item container>
<Grid item xs={2} />
<Grid item container>
<Content />
</Grid>
</Grid>
<Grid item xs={2} />
</Grid>
</Provider>
I'm seeking guidance on managing these state variables without triggering a re-render
Regards,