A way to display the component once by using localstorage in React

Question

I have a component that I want to display once the user loads the website. Then if they click to close it shouldn't display. What's the best way to do this by using ComponentDidMount()? I assume the click out state should be in componentDidMount?

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            wasShown: false
         }
         console.log(this.props)
    }
    componentDidMount() {

    }
    render(){

        return ( 
            <div>
                {  !wasShown ? <MyComponent /> : '' } 
            </div>
        );
    }
};

If the user is authenticated, it's a good idea to store this value in user session and access it from there. If this is outside authentication, then localStorage is a good choice. — Dinesh Pandiyan, Feb 19 '19 at 01:55

Minan · Answer 1 · 2019-02-19T01:30:42.073

2

I hopes this work.

class App extends Component {
    constructor(props){
        super(props);


        this.state = {
            wasShown: localStorage.getItem("wasShown") ? true : false
        }
    }

    close() {
        localStorage.setItem('wasShown', 'true')

        this.setState({ wasShown: true })
    }

    render() {
        return ( 
            <div>
                {  !wasShown ? <MyComponent onClick={this.close.bind(this)} /> : '' } 
            </div>
        )
    }
}

edited Feb 19 '19 at 01:30

answered Feb 19 '19 at 01:26

Minan

807
7
17

1

set wasShown but get lastname? – wang Feb 19 '19 at 01:28
I guess a little mess :) – Minan Feb 19 '19 at 01:31

Dacre Denny · Answer 2 · 2019-02-19T01:54:20.200

Consider the following, where the components state is initialised in the constructor based on the state of your local store:

class App extends Component {

    constructor(props){
        super(props);
        /* Initialise component state from local store state outright */
        this.state = {
            wasShown: localStorage.getItem('wasShown') ? true : false
        }
    }

    /* Example class method showing how close logic might be defined */
    onClickClose() {

        /* Persist updated value to "wasShown" key in store for recall
        on next reload */
        localStorage.setItem('wasShown', 'true')            

        /* Update internal state in response to click to hide
           immediately hide component */            
        this.setState({ wasShown : true })
    }

    /* 
    Not needed
    componentDidMount() { }
    */

    render(){

        const { wasShown } = this.state;

        return wasShown ? null : <MyComponent onClick={this.onClickClose.bind(this)} />
    }
};

There are two main advantages for initialising state in the constructor:

avoids the need for integration into a life cycle hook
avoids a call to setState() which would require a re-render of the component

Hope that helps!

Thank you for the response! In this case the component shows only on the first load, but I want it to be there unless they click the close button. — Max T, Feb 19 '19 at 01:31

score 0 · Answer 3 · answered Feb 19 '19 at 02:45

If you want to give the user option to close a component.It can be done in a number of ways.

1.The button or click event which will close your component will be in some other component which will remain mounted.Like a sidebar menu.

2.If the click event is in the same component you need to change the view so you need the close click event to load other component on the same view.

This answer may help

How to unmount, unrender or remove a component, from itself in a React/Redux/Typescript notification message

render(){

    const { wasShown } = this.state;

    return !localStorage.getItem('wasShown') ? null : <MyComponent/>  
}


class MyComponent extends Component{
  render{

    return(
         <div> <button onClick={ ()=>{
              localStorage.setItem('wasShown',true);

              }}/> 
         </div>
       )
   }
  }

A way to display the component once by using localstorage in React

3 Answers3