CODEWITHSUNDEEP
javascriptreactjs
Max T
Max T

Reputation: 1455

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

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>
        );
    }
};

Upvotes: 3

Views: 1218

Answers (3)

Deepak Adhana
Deepak Adhana

Reputation: 104

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>
       )
   }
  }

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30390

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!

Upvotes: 0

Minan
Minan

Reputation: 887

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>
        )
    }
}

Upvotes: 2

Related Questions