How can I make the user's last name appear in the first paragraph when typing, the first name in the second, and the middle name in the third?

Question

React

Help me solve a simple task on React'e. Given an input and 3 paragraphs. The user's full name is entered into the input, separated by a space. Make sure that when typing, the user's last name appears in the first paragraph, the first name in the second, and the middle name in the third.

Answer 1

class App extends React.Component {
  state = {
    value: '',
  }

  onChange = ({ target: { value } }) => {
    this.setState({ value });
  }

  render() {
    const name = this.state.value.split(/\s+/);

    return (
      <div>
        <input onChange={this.onChange} />
        <p>Ф: {name[0]}</p>
        <p>И: {name[1]}</p>
        <p>О: {name[2]}</p>
        {name[3] && <p>WTF??! {name.slice(3)}</p>}
      </div>
    );
  }
}