Why can't I change the value using my input?

Question

I´m trying to change one value of my parent. My parent container send the data to PersonalComponent and PersonalComponent send the data to my AvatarComponent what is the component where I have my input

I receive the props in my PersonalComponent that's I know, but when I send the data to AvatarComponent , I think I can change the data of my container that's the parent of PersonalComponent

This is the parent of all:

class HandlePersonal extends Component {
  state = {
    ...this.props.user
  };

  handleUsername = e => {
    e.preventDefault();

    this.props.dispatch({
      type: "CHANGE_USERNAME",
      payload: this.state.displayName
    });
  };

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

  render() {
    return (
      <PersonalComponent
        handleUsername={this.handleUsername}
        handleChange={this.handleChange}
        data={this.state}
      />
    );
  }
}

This is my PersonalComponent

const PersonalComponent = props => {
  return (
    <div id="personal">
      <h2>My profile</h2>
      <Card>
        <div id="personal-container">
          <div id="cover">
            <CoverComponent />
          </div>
          <div id="avatar">
            <AvatarComponent
              data={props.data.photoURL}
              onChange={props.handleChange}
            />
          </div>
          <div id="user-name">
            <form onSubmit={props.handleUsername}>
              <InputText
                name="displayName"
                value={props.data.displayName}
                onChange={props.handleChange}
              />
              <Button id="save-username" label="Ok" />
            </form>
          </div>
        </div>
      </Card>
    </div>
  );
};

I know that it's working because I had alert(props.data) inside PersonalComponent

And then, this is my AvatarComponent

<h1>Value: {props.data}</h1>
<input name="photoURL" value={props.data} onChange={props.handleChange} />

And here, if I alert(props.data) I receive null that's the actual value of photoURL in the HandlePersonal but I can't change the value using my input. Why?

I want to make that when i write in my input inside AvatarComponent the value of HandleContainer change

Answer 1

In short: HandlePersonal.handleChange() needs to call this.setState('photoUrl': 'input value') to update the state.

Lemme knwo if you need detailed answer..im on my phone so not so convenient.

EDIT <input name="photoURL" value={props.data} onChange={props.onChange} /> Because u pass it as onChange