1

I am developing a webapp in reactjs using typescrpit in visual studio 2017, which is very new technology for me. I am stuck at a problem where i dont know how to re-render a component from another component.

I have a log in page. What i want to do is display the username in my header component when the user logs in. Only problem is, the header component is common for all my web pages. Following is my layout.tsx file:-

export interface LayoutProps {
children?: React.ReactNode;
}

export class Layout extends React.Component<LayoutProps, {}> {
public render() {
    return <div>
        <Header />
        <div className='layout_wrapper'>
            {this.props.children}
        </div>
        <Footer />
    </div>;
}
}

This is the only file where i have used my header component so that i wont have to use it in every component i create. componentDidMount() of header component will check for access token and make an api call to get user details. Now my question is, how can i re-render this component from another component so that when the user logs in, he can see his name in this header component? Please tell me if i need to provide more code if my question is not clear. Thanks

Improve this question

2 Answers 2

Reset to default
1

Considering this is a small app, this solution will work. But it shouldn't be used when the app isn't a small one, because it will make the code complex.

So, according to information given by you, the hierarchy is as follows:

<Header>
    <SignIn>
        <SignInContent/>
    </SignIn>
</Header>

,where SignInContent component is calling the api. We will define a function in Header, and pass it as props to the SignIn component

export class Header extends React.Component<HeaderProps, HeaderState> { 
    constructor(){
       this.state = { isLoggedIn: false }; //Add this to existing state variables
    }
    render() {
        return {
            <SignIn setIsLoggedInTrue={this.setIsLoggedInTrue.bind(this)} />
        }
    }
    componentDidUpdate(prevProps, prevState) {
        if(this.state.isLoggedIn && !prevState.isLoggedIn) {
            // Make the api call for fetching user details
        }
    }
    setIsLoggedInTrue() {
       this.setState({isLoggedIn: true});
    }
}

And in the SignIn component, again in the render method pass the props to SignInContent like this: <SignInContent setIsLoggedInTrue={this.props.setIsLoggedInTrue} /> once it is logged in, you can call this.props.setIsLoggedInTrue function from the SignInContent component. This should solve your purpose

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

No i am not using reflux or redux as it is going to be a very small app with minimum api calls
In which component are you making the api call?
In the sign in component to get access token and store it in cookie, and in header component to get the user details using that access token so that i can get the username and display in header
So initially when user is not logged in and, when it does, your function in Signin component gets the access token, after which header component has to make the api call to get user details. Talking about this workflow, is the header component making this api call?
Yes. The header component checks whether the token exists, if yes then it makes an api call for getting the user details. depending upon the user details i show/hide the username in header
|
0

Your component will be re-rendered if the supplied props have changed.

By looking at your code, the value of this.props.children should change which will eventually trigger a re-render of your component

Also, if you want to know how to trigger it at login. There should be a componentWillReceiveProps method which checks the login state of the user, and if found logged in will update the values passed to the component :)

EDIT

Here's a sample code to your problem. Since this.props.children is used. You'll need to use it like this.

    render() { return (
       <Layout>
         {this.state.userName}
       </Layout>
       );}

Now call the api and set the userName

Improve this answer

2 Comments

but how do i supply the props if it is used just in this file. Also, i am making an api call in this component to get the username. componentWillReceiveProps will trigger an api call every time which i want to avoid.
i am developing this app in visual studio using reactjs template, that is why i want those tags. layout.tsx is a file that visual studio generates when i create a new reactjs project. So this.props.children are actually other components which will render. Are you suggesting that i call this layout component when i sign in?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.