如何防止子页面的状态变量之一改变其值？如何保留初始值作为父页面的道具？ -ReactJS

Question

My child page opens when a flag in my parent called 'isChildOpen' is true. Now I want to make the state variable filtered2 in my child unchangable. filtered and filtered2 should get same value from the parent when I open the child page but while filtered can change during any operation in the child, filtered2 should retain its initial value of the opening of child every time. It should get its value from the parent when the parent is opened but not change due to any operations in the child.

Child Code

 class Child extends Component {
    constructor(props) {
     super(props);
      this.state = {
       data: this.props.data,
       filtered: this.props.filtered
       filtered2: this.props.filtered
       };
     }

I have tried Object.freeze but is of no help.

This is how the child opens from the parent page

         {this.state.isChildOpen &&
         <Child 
            data={this.state.data}
            filtered={this.state.filtered}
          />}

Can anyone help me in this regard? filtered can change during any operations in the child but filtered2 should retain the initial value after the child is just opened.

Answer 1

I believe you could use this.props.filtered.slice()

This would make a replica of the value

Answer 2

{this.state.isChildOpen &&
   <Child 
     data={this.state.data}
     filtered={this.state.filtered}
     filtered2={this.state.filtered2}
   />}

when this.state.isChildOpen switch to false and then again to true a new instance of Child is created and so the constructor is again invoked with a new value of filtered2 .

you should pass isChildOpen as a prop down to Child and handle the rendering from there

<Child 
  data={this.state.data}
  filtered={this.state.filtered}
  filtered2={this.state.filtered2}
  isChildOpen={this.state.isChildOpen}
/>}


class Child extends Component {
    constructor(props) {
     super(props);
      this.state = {
         filtered2: this.props.filtered2
       };
     }

     render() {
       const { data, filtered, isChildOpen } = this.props; // this props will update following the parent
       const { filtered2 } = this.state; //this prop will be controlled by the child and will keep the value once the instantiation
       if(!isChildOpen) {
          return null;
       }
       // otherwise render the component
     }