15 - Shallow vs Deep Merge 3

15-shallow-vs-deep-merge-3.markdown

15 - Shallow vs Deep Merge 3

A Pen by deenJohn on CodePen.

License.

index.html

 
  <div id="root"></div>

script.babel

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

class Parent extends React.Component {
  initialState = {}
    
  state = {
       someProperty: {
          someOtherProperty: {
              anotherProperty: {
                 flag: false
              }

          }

       }

    }

componentDidMount() {
  this.initialState = Object.assign({}, this.state);
}

 handleMerge = () => { 
   /*
   not working
   this.setState({
  someProperty: {
    ...this.state.someProperty,
    anotherProperty: {
      ...this.state.someProperty.anotherProperty,
      flag: true
    }    
  }
})
   */
   
    // working
    // var clone = JSON.parse(JSON.stringify(this.state));
    //  clone.someProperty.someOtherProperty.anotherProperty.flag = true ;
    // this.setState(clone);
   
   //working
   this.setState(prevState => ({
    ...prevState,
    someProperty: {
        ...prevState.someProperty,
        someOtherProperty: {
            ...prevState.someProperty.someOtherProperty, 
            anotherProperty: {
               ...prevState.someProperty.someOtherProperty.anotherProperty,
               flag: true
            }
        }
    }
}))
  }
 
 //this.setState((prevState) => ({someProperty : {}} //not working
 handleReset = () =>{  
   var clone = JSON.parse(JSON.stringify(this.initialState));
    this.setState(clone) ;  
  }
  render() {
    console.log(this.state)
    return (
      <div>
        <button onClick={this.handleMerge}>
           Merge
        </button>
        <button onClick={this.handleReset}>
           Reset
        </button>
        <p style ={{backgroundColor : 'gold' , width: 500 ,height :200,marginTop:5}}>{JSON.stringify(this.state , null, '\t')} </p>
      </div>
    );
    }
}


const App = () => (
  <div>
    <Parent/>    
  </div>
);


ReactDOM.render(<App /> , document.getElementById('root'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="//unpkg.com/react-addons-update/react-addons-update.js"></script>

style.css

button{
  margin-right : 10px
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />