ReactJs How to re render a static component in reactjs reactjs render html,reactjs render props,reactjs render array,reactjs

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

Answer: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

Answer:2



  1. reactjs render html
  2. reactjs render props
  3. reactjs render array
  4. reactjs render if
  5. reactjs render function
  6. reactjs render array of components
  7. reactjs render multiple components
  8. reactjs render html string

I've taken over a React project and am fumbling incorporating react-share with react-image-lightbox. I'm pretty unfamiliar with React and Typescript all together so any insight is much appreciated. ...

I've taken over a React project and am fumbling incorporating react-share with react-image-lightbox. I'm pretty unfamiliar with React and Typescript all together so any insight is much appreciated. ...

I am building a sports web app, and for the application I need thumbnail images for each NBA basketball player. I have written a script that grabs image paths (links like this - http://a.espncdn.com/...

I am building a sports web app, and for the application I need thumbnail images for each NBA basketball player. I have written a script that grabs image paths (links like this - http://a.espncdn.com/...