How to render a component multiple times in react

Question

Hi I am new to react and looking for some help to figure out on how to render my component when ever a function(child calling parent function) is called. Below is my jsx code.

import * as React from 'react';
import Header from "./Header";
import ProfilePageForm from "./ProfilePageForm";
import UserDetails from "./UserDetails";
import Grid from '@material-ui/core/Grid'
import { UserContext } from '../App.js';
import { useEffect, useState, createContext, useContext } from 'react';


const ProfilePage = () => {

    var user = useContext(UserContext);
    const [canRender, setCanRender] = useState(false);
    var userUpdatedData = null;
    var userName = null;
    var city = null;
    var email = null;
    var userId = null;
    var imgSrc = null;

    if (user.id == null || user.userDetails == null || user.imgSrc == null) {
        user.id = localStorage.getItem('LoggedInUserId');
        user.userDetails = localStorage.getItem('LoggedInUserDetails');
        user.imgSrc = localStorage.getItem('LoggedInUserImageSrc');
    } 

    const userDetails_Data = (data) => {        
        userUpdatedData = data;        
        if (userUpdatedData != null) {
            user.id = localStorage.getItem('LoggedInUserId');
            if (JSON.parse(userUpdatedData)[0].userDetails_successful) {
                setCanRender(true);                
                user.userDetails = JSON.parse(userUpdatedData)[0].userDetails;
                user.imgSrc = JSON.parse(userUpdatedData)[0].imageSrc; 
                console.log('User Updated Data status from parent-->', JSON.parse(userUpdatedData)[0].userDetails_successful);
                localStorage.setItem('LoggedInUserDetails', JSON.stringify(user.userDetails)); 
                localStorage.setItem('LoggedInUserImageSrc', user.imgSrc);                
            } else {
                console.log('User Updated Data status--> False');
            }
        }
    }
    
    if (userUpdatedData == null && !canRender) {
        userName = JSON.parse(user.userDetails)[0].name;
        city = JSON.parse(user.userDetails)[0].city;
        email = JSON.parse(user.userDetails)[0].email;
    } else {
        userName = user.userDetails[0].name;
        city = user.userDetails[0].city;
        email = user.userDetails[0].email;
    }
    
    userId = user.id;
    imgSrc = user.imgSrc;

    if (canRender) {
        return (
            <React.Fragment>                
                <Header />
                <Grid container>
                    <Grid item xs={6} style={{ textAlign: 'center' }}>
                        <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
                    </Grid>
                    <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
                        <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
                    </Grid>
                </Grid>
            </React.Fragment>
        );
    }
    else {
        return (
            <React.Fragment>
                <Header />
                <Grid container>
                    <Grid item xs={6} style={{ textAlign: 'center' }}>
                        <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
                    </Grid>
                    <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
                        <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
                    </Grid>
                </Grid>
            </React.Fragment>
        );
    }
}

export default ProfilePage;

Here canRender is set to true when child useEffect response is true and I am able to render the component for the only first time. Below is the child useEffect jsx code.

 useEffect(() => {
        
        console.log('User Details from Profile Page Form' + JSON.stringify(props.userList))
        props.userList.map((record, index) => {
                        
            if (record.userDetails_successful) {  
                props.userDetailsData(JSON.stringify(props.userList));
                console.log('User Details status from child-->', record.userDetails_successful);                
            }            
        })       
        
    }, [props.userList])    

I only want my UserDetails component to be called whenever there is a change from the child useEffect hook and update the details immediately on screen without reload. I hope you understand the issue I am facing here. Please let me know if you need further more information.

Answer 1

I have solved the above issue by state modification. Below is my jsx code.

import * as React from 'react';
import Header from "./Header";
import ProfilePageForm from "./ProfilePageForm";
import UserDetails from "./UserDetails";
import Grid from '@material-ui/core/Grid'
import { UserContext } from '../App.js';
import { useEffect, useState, createContext, useContext } from 'react';


const ProfilePage = () => {

    var user = useContext(UserContext);
    const [, setCanRender] = useState(0);
    var userName = null;
    var city = null;
    var email = null;
    var userId = null;
    var imgSrc = null;    

    user.id = localStorage.getItem('LoggedInUserId');
    user.userDetails = localStorage.getItem('LoggedInUserDetails');
    user.imgSrc = localStorage.getItem('LoggedInUserImageSrc');


    const userDetails_Data = (userDetails_successful, userDetails, imgSrc) => {

        user.id = localStorage.getItem('LoggedInUserId');
        if (userDetails_successful) {            
            localStorage.setItem('LoggedInUserDetails', JSON.stringify(userDetails));
            localStorage.setItem('LoggedInUserImageSrc', imgSrc);            
            setCanRender(c => c + 1);

        } else {
            console.log('User Updated Data status--> False');
        }

    }

    userName = JSON.parse(user.userDetails)[0].name;
    city = JSON.parse(user.userDetails)[0].city;
    email = JSON.parse(user.userDetails)[0].email;

    userId = user.id;
    imgSrc = user.imgSrc;


    return (
        <React.Fragment>
            <Header />           
            <Grid container>
                <Grid item xs={6} style={{ textAlign: 'center' }}>
                    <ProfilePageForm userId={userId} userDetailsData={userDetails_Data} />
                </Grid>
                <Grid item xs={6} style={{ textAlign: 'center', paddingTop: '-5vh' }}>
                    <UserDetails userName={userName} city={city} email={email} imgSrc={imgSrc} />
                </Grid>
            </Grid>
        </React.Fragment>
    );
}

export default ProfilePage;