Updating state with properties

You've seen how the componentDidMount() and getDerivedStateFromProps() life cycle methods help get your components the data they need. There's one more scenario that you need to consider—re-rendering the component container.

Let's take a look at a simple button component that tracks the number of times it's been clicked:

import React from "react";

export default ({ clicks, disabled, text, onClick }) => (
  <section>
    <p>{clicks} clicks</p>
    <button disabled={disabled} onClick={onClick}>
      {text}
    </button>
  </section>
);

Now, let's implement a container component for this feature:

import React, { Component } from "react";
import MyButton from "./MyButton";

export default class MyFeature extends Component {
  state = {
    clicks: 0,
    disabled: false,
    text: ""
  };

  onClick = () => {
    this.setState(state => ({ ...state, clicks...