React Как изменить значение value у input с последующим сохранением его состояния?

Помогите разобраться с вопросом подъёма состояний в React вот на таком упрощенном примере

import React from "react";

class ProfileForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    });
  }

  handleSubmit(event) {
    alert("Отправленное имя: " + this.state.value);
    event.preventDefault();
  }

  render() {
    const currentUser = this.props.users[this.props.userIndex];

    let userNick = currentUser.name;
    let userName = currentUser.fullName;
    let userTelegram = currentUser.telegram;

    //console.log("currentUser", currentUser);

    return ( <
      div className = "profile_form__full" >
      <
      form className = "profile_form"
      onSubmit = {
        (event) => this.handleSubmit(event)
      } >
      <
      input className = "profile_form__input"
      type = "text"
      name = "name"
      value = {
        userNick
      }
      onChange = {
        (event) => this.handleChange(event)
      }
      /> <
      button className = "profile_form__change"
      type = "button" > < /button> <
      /form> <
      form className = "profile_form"
      onSubmit = {
        (event) => this.handleSubmit(event)
      } >
      <
      input className = "profile_form__input"
      type = "text"
      name = "fullName"
      value = {
        userName
      }
      /> <
      button className = "profile_form__change"
      type = "button" > < /button> <
      /form> <
      form className = "profile_form"
      onSubmit = {
        (event) => this.handleSubmit(event)
      } >
      <
      input className = "profile_form__input"
      type = "text"
      name = "telegram"
      value = {
        userTelegram
      }
      /> <
      button className = "profile_form__change"
      type = "button" > < /button> <
      /form> <
      /div>
    );
  }
}

export default ProfileForm;

Задача состоит в том что бы изменяя поля input-ов, а потом нажимая кнопки отравить, компоненты в проекте сохраняли значения name fullName telegram у определенного пользователя. (Перезаписывали свои состояния) Подскажите, пожалуйста, как это реализуется ? Правильно ли я понимаю, что state в данном случае надо хранить в компоненте App что б он менялся по всему проекту?


Ответы (0 шт):