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

Answer 1

You can extend state as follows:

constructor(props) {
  super(props)

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

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>