CODEWITHSUNDEEP
javascriptreactjs
Yoann
Yoann

Reputation: 202

Hide / Show div doesn't work

I'm trying to create a simple component with React (I'm a new user), and I have some troubles to show and hide div. I'm using a state to handle a click and change state, which works fine. Problem is when I'm using the back button from the browser, and come back on the main page, I've no clue how to handle state change as there is no interaction with the user.

I tried to use the location context to change state if the URL pathname === "/", but it looks like anti react pattern because I have to force the component to rerender and check the pathname inside the initial state function. Any ideas how to handle this case?

 // DIV on the main page
const Div = React.createClass({

  /*contextTypes: {
    location: React.PropTypes.object
  },*/

  getInitialState: function() {
      console.log("get initial state");
        return { hideDiv: false };
  },

   handleClick(){
    this.setState({ hideDiv: true });

  },

  render() {

    console.log(this.state.hideDiv);
    let componentDOM;

    if(this.state.hideDiv === true){ componentDOM = <div></div>;}
    else{
      componentDOM = <div id='showHide'>
                          <form>
                              <div>
                                  <select>
                                    <option> ... </option>
                                  </select>
                              </div>
                              //Link to a second page
                              <button type='submit' onClick={this.handleClick}> <Link to {'/destination'}>Submit</Link></button>
                          </form>
                      </div>;
    }
    return (componentDOM);
  }
});

Upvotes: 3

Views: 191

Answers (2)

Jose Mato
Jose Mato

Reputation: 2799

To do this you should save your state, using localstorage for example, like this:

handleClick: function(e) {
    this.setState({hideDiv: true});
    var state = this.state; // we need to add hideDiv with new value because setState could not update instantly
    state.hideDiv = true;
    localStorage.setItem('MyDivComponent', JSON.stringify(state));
}

And then, when a component mount, get default state:

getInitialState: function() {
    var state = JSON.parse(localStorage.getItem('MyDivComponent')) || {};
    return {
        hideDiv: state.hideDiv || false
    };
}

Upvotes: 1

Vladimir Rovensky
Vladimir Rovensky

Reputation: 4704

I would advise against storing the information about whether or not the component with the form is visible in its own state. From your description, it seems to me like this information belongs higher in the hierarchy - the Div component itself is not capable of deciding whether or not it should be visible, as that depends on some context (URL / application phase) unknown to it.

I'd recommend something like this:

var App = React.createClass({    
    //Data for the form, you might want to keep them in a store
    getInitialState(){ return {data: {}}; } 

    render(){
         //Pass data from your routing library to the props of App
         if(this.props.routingParams.url === 'form')
             return <Div data={this.state.data} onDataChanged={...} />
         else
            return <Destination data={this.state.data} />
    }
});

Plus remove the state and the hiding logic from Div completely.

Upvotes: 1

Related Questions