JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "John Doe"
    };

    // Works fine: changes the value to Jane Doe
    setTimeout(() => {
      this.setState({ value: "Jane Doe" });
    }, 2000);

    // Will make the input component an uncontrolled component.
    // This causes the warning
    setTimeout(() => {
      this.setState({ value: undefined });
    }, 4000);
  }

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

class UserSettings extends React.Component {
  state = {
    value: ""
  };

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  static getDerivedStateFromProps(nextProps) {
    return {
      value: nextProps.value
    };
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <label>Value</label>
        <input
          type="text"
          name="value"
          placeholder="My placeholder"
          value={value}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App name="world" />, document.getElementById("container"));