CODEWITHSUNDEEP
reactjsmeteorstate
Nikolay Podolnyy
Nikolay Podolnyy

Reputation: 1091

Set React state from Meteor data

developers! Can someone help me please? I'm trying set state in React from Meteor data and edit this state data from input, it looks like

class Profile extends Component{
  constructor(props){
    super(props);
    this.editProfileBind = this.editProfile.bind(this);
    this.testEmailBind = this.testEmail.bind(this); }

  testEmail(e){
    const input = e.target;
    this.setState({
      email: input.value
    });
    input.value = this.state.email;
  }

  editProfile(e){
      e.preventDefault();
  }

  render(){
    return(
         <form className="col-md-4 col-xs-6" 
             onSubmit={this.editProfileBind}>
             <input type="email"
                  onChange={this.testEmailBind}
                  value={this.props.email || ''}
                />
           <button type="submit">Submit</button>
        </form>
   )
 }
}  // end component

export default createContainer(() => {
    const user = Meteor.user();
    const email = user.emails && user.emails[0].address;

    return { email };
}, Profile);

Can you suggest me how can I set this.state.email to input instead this.props.email? Thanks!

Upvotes: 0

Views: 564

Answers (1)

Chase DeAnda
Chase DeAnda

Reputation: 16441

Couple issues with the code:

1. Intialize state with props

In the constructor, you need to set your initial state to the email prop being passed in.

2. Input value should equal this.state.email

The value isn't updating because you are setting the value to the prop being passed in (which doesn't change) instead of the email state that your testEmail function is updating.

3. Update State with new props

You need to add a componentWillReceiveProps function that updates your email state when new data is passed into the Profile component.

The Profile component should look like this:

class Profile extends Component{
  constructor(props){
    super(props);
    this.editProfileBind = this.editProfile.bind(this);
    this.testEmailBind = this.testEmail.bind(this); 
    this.state = {
        email: props.email
    }
  }

  testEmail(e){
    const input = e.target;
    this.setState({
      email: input.value
    });
  }

  editProfile(e){
      e.preventDefault();
  }

  componentWillReceiveProps(nextProps){
    this.setState({
        email: nextProps.email
    });
  }

  render(){
    return(
         <form className="col-md-4 col-xs-6" 
             onSubmit={this.editProfileBind}>
             <input type="email"
                  onChange={this.testEmailBind}
                  value={this.state.email}
                />
           <button type="submit">Submit</button>
        </form>
   )
 }
}  // end component

export default createContainer(() => {
    const user = Meteor.user();
    const email = user.emails && user.emails[0].address;

    return { email };
}, Profile);

Upvotes: 4

Related Questions