Extends state react

Question

I need to inherit the state. Can I inherit the state? When I do this, I get an empty state.

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

class Example2 extends Example {
  render() {
    return (
      {this.state.param1} // empty
    )
  }
}

Tillo

All the answers have one meaning, but this solution did not suit me – Tillo

Answer 1

You can extend state as follows:

constructor(props) {
  super(props)

  this.state = {
    ...this.state,
    extraStuff: '',
  }
}

Linkboy

Answer 2

Instead of using inheritance, you could use regular composition and pass the entire Example state as props to Example2 and use the props passed to Example2 as initial state.

Example

class Example extends React.Component {
  state = {
    param1: "test"
  };

  render() {
    return <Example2 {...this.state} />;
  }
}

class Example2 extends React.Component {
  state = {...this.props};

  render() {
    return <div>{JSON.stringify(this.state)}</div>;
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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

Bilow

Answer 3

class Example extends Component {
  constructor(props) {
    super();
      this.state = {
        param1: "param1"
      };
  }
  render() {
  const { param1 } = this.state;
  return (
  <Example2 param1={param1} />
 )
 }
}   

class Example2 extends Example {
  render() {
    const { param1 } = this.props;
    return (
      {param1} 
    )
  }
}

Tredecillion

Answer 4

Kovich. You can pass the state of one component to another only as props like this code:

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

render(){

return (<Example2 param1 ={this.state.param1} />)
}

 ...
}

class Example2 extends Example {

  constructor(props) {
    super();
      this.state = {
        param1: this.props.param1
      };
  }
  render() {
    return (
      {this.state.param1} // empty
    )
  }
}

Second

Answer 5

Inheritance is not really supported in React, you can find more information on this link:

https://reactjs.org/docs/composition-vs-inheritance.html#so-what-about-inheritance

What you can do is to have a global state manager (for example Redux) or pass the state to the Example2 component on the following way:

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

    this.state = {
      param1: 'test'
    };

  render() {
    return (
      <Example2 state={this.state} />
    );   
  } 
}

After that you will be able to reach it in Example2 by this.props.state.param1.

Il