Update Avatar value from Text feild

Question

I am very new with React.JS as well as new for JS. I have to update avatar value from a text field. This is just a small demo project. My target is as below:

It means that if some one has entered Text in

Nick name

Then Avatar Text must be updated. My render method in App.js as below

 return (
      <div className="App">
                <div style={avatarParentContainer}>
                  <div style={divStyleAvatar}>
                  </div>
                  <span style={avatarContainer}>
                    {avatar}
                  </span> 
                </div>
                 <div>
                  <Login/>
                </div>     
      </div>
    );

Below is my Avatar

avatar= <Avatar 
      name={this.setState({avatarname:''})} 
      size="200"  
      round={true} 
      style={avatarClass}
      />;

As in above code i have one separate component as

Login

This Login component have Nick Name field as below:

 <TextField
   hintText="Enter your Nick name"
   floatingLabelText="Nick Name"
   onChange = {(event,newValue)=>this.setState({nickname:newValue})}
   />

I know this is silly question for expert person but in my case i am struggling with it. Please help me to get rid this issue.

Answer 1

Move state to your App component. Avatar and Login should be a stateless components. Then you can pass function as a prop to Login, and name from state to Avatar component. Something like this (not tested, because I don't have code of these comopnents ;) ):

const Login = ({ onChange }) => (
  <TextField
    hintText="Enter your Nick name"
    floatingLabelText="Nick Name"
    onChange = {(event, newValue) => onChange(newValue)}
  />
);

const Avatar = ({ name }) => (
  <Avatar 
    name={name} 
    size="200"  
    round={true} 
    style={avatarClass}
  />
);

And in App:

return (
  <div className="App">
    <div style={avatarParentContainer}>
      <div style={divStyleAvatar}>
        <span style={avatarContainer}>
          <Avatar name={this.state.avatarname} />
        </span> 
      </div>
    <div>
    <Login onChange={avatarname => this.setState({avatarname})} />   
  </div>
);