Setting Data in Main Function Defined in getInitialProps - reactjs

Question

In my NextJS app, I get initial data via getInitialProps;
TvApp.getInitialProps = async (ctx) => {
const res = await axios.get(`http://192.168.1.2:8090/api/tv_app/:${lineId}`)
const data = await res
return { data: data.data }
}
I use that data like this;
export default function TvApp(data) {
return (
<div className={styles.container}>
<h2 className={styles.bigAmount}>
{data.data.thirdScreen[0] && data.data.thirdScreen[0].AMOUNT}
</h2>
</div>
);
}
I also want to update my view in every 10 seconds.
My problem is I cannot set the data previously defined in getInitialProps.
export default function TvApp(data) {
useEffect((data) => {
const timer = setInterval(() => {
axios.get(`http://192.168.1.2:8090/api/tv_app/:${lineId}`)
.then(response => ) //This line should set the data with response
.catch(error => {
console.error(error.response.data);
});
return () => clearInterval(timer);
}, 10000);
}, []);
return (
<div className={styles.container}>
<h2 className={styles.bigAmount}>
{data.data.thirdScreen[0] && data.data.thirdScreen[0].AMOUNT}
</h2>
</div>
);
}
How can I set the data in useEffect?
This is probably a very basic question but I cannot find a way.

Answer 1

You can use sate variable to hold the data if it has to be updated in component
export default function TvApp(props) {
const [data,setData] = useState(props.data);
useEffect(() => {
const timer = setInterval(() => {
axios.get(`http://192.168.1.2:8090/api/tv_app/:${lineId}`)
.then(response =>
setData(response.data);
) //This line should set the data with response
.catch(error => {
console.error(error.response.data); });
return () => clearInterval(timer);
}, 10000);
}, []);
return (
<div className={styles.container}>
<h2 className={styles.bigAmount}>
{data.thirdScreen[0] && data.thirdScreen[0].AMOUNT}
</h2>
</div>
);
}