How do I make a React component editable?

Question

At the last stage of my project for learning react and firebase and I am facing a problem. From reading the docs of both of those I have understood how and what to do for the most part.

I want to take in the content from a blog post and then edit it and post it back using the

update()

method firebase has. As of now, the two errors I am facing are that I am unable to edit that content as react says that it is a controlled element which I understand from the docs is cause I passed in it as a value.

But when I tried to remove that and instead create a setState in an onInputChange like the docs suggested it gets updated but with blank content and the original text is missing as well from the input field. Which means it something I am doing wrong with react but I’m not sure what it is.

  constructor(props){
    super(props);
    this.state =  {
      title: '',
      body: '',
      post:{},
      
  };
    this.onInputChange = this.onInputChange.bind(this);
    this.onHandleUpdate = this.onHandleUpdate.bind(this);
}

  
  componentDidMount(){
    database.ref(`posts/${this.props.match.params.postId}`) 
    .on('value', snapshot => {
          this.setState({post: snapshot.val()});
    });
    this.postId= this.props.match.params.postId;
    
}
  onInputChange(e){
    this.setState({
       title: ‘’, body:''


    });
  }

  onHandleUpdate(e){
    console.log(this.postId);
    e.preventDefault();
    database.ref('posts').child(`${this.postId}`).update(this.state); 
    this.setState({
      title: '',
      body: ''    
    });
  }

  render() {
    return (
 
        <div className="container">
          <form onSubmit={this.onHandleUpdate}>
            <div className="form-group">
              <input value={this.state.title && this.state.post.title}  className="form-control" type="text" name="title" ref="title" onChange={this.onInputChange}/>
            </div>
              <br/>
            <div className="form-group">  
              <input value={this.state.body && this.state.post.body} className="form-control" type="text" name="body" ref="body" onChange={this.onInputChange} />
              <br/>
            </div>
            <button  className="btn btn-success">Submit</button>
          </form>
        </div>
      
    );
  }
    
    
    
}

This is the how the code is set up at the moment. The summary of the problem simply comes down to why I am unable to change the value in the text box. What am I doing wrong please?

@josh Thanks for the edit. Should help get me some help now that it is clearer! — Al-m, Feb 12 '18 at 18:56

Josh Pittman · Accepted Answer · 2018-02-23T06:08:32.607

If you'd like to make an input editable controlled input in react create the input with a value and a way to change that value:

<input
 type="text"
 value={this.state.title}
 onChange={e => this.handleInputChange(e)}
/>

In your code above you have defined a pair of onChange handlers but you don't pass the event into them so they never have any data to work with.

For my example, my onChange handler could be:

handleInputChange(e) {
    this.setState({
      title: e.target.value
    });
  }

Whenever I type into my input it will change the state of the component and that will change what I see in the input. It's a little indirect but that's how controlled components work in react.

If you add a new Input, then you can create a new onChange handler and everything should work fine. This approach gets complicated quick though. Create a form with 10 inputs and suddenly you have a hoard of functions to look after in your component.

A more manageable approach would be to create a single onChange handler that works with every input component. You can create this by passing the name of the state field you want to update into the function.

 handleChange(e, field) {
    this.setState({
      [field]: e.target.value
    });
  }

Then in your input you can use it like so:

<input
          type="text"
          value={this.state.title}
          onChange={e => this.handleChange(e, "title")}
        />

The field parameter is a string of the name of the field in state that you want that input to update.

This means you can reuse the same method for the body input like so:

  type="text"
  value={this.state.body}
  onChange={e => this.handleChange(e, "body")}
/>

You can delete the onTitleChange and onBodyChange methods and replace them with the handleChange method above. Much simpler. The less moving parts there are, the fewer things there are to break.

When you are ready to submit your form you can use the desired values in state in your onHandleUpdate method like so:

onHandleUpdate(e){
    e.preventDefault();
    database.ref('posts').child(`${this.postId}`).update({
       title: this.state.title,
       body: this.state.body
    }); 
    this.setState({
      title: '',
      body: ''    
    });
  }

There is no need to do the whole nesting thing you are doing with the post value in state. You can nest to your heart's content, but while you're still learning just keep things easy to reason about by keeping as much as you can un-nested in state.

database.ref(`posts/${this.props.match.params.postId}`) 
    .on('value', snap =>  this.setState({
       title: snap.val().title, 
       body: snap.val().body 
    }));

I made a little sandbox to show that all this works. Have a look at the hello component here. I've simplified it a bit and I had to replace the database calls (since I don't have your firebase keys) but it should make sense.

Hey Josh!! Took a while to get back but I just implemented this and it worked. Well, I got an error with the handleUpdate update function as you put title: this.state.payload, it said undefined but it was working when I switched it to this.state.title, not sure if that was meant to happen — Al-m, Feb 23 '18 at 06:01
Glad it helped. Yes, that was a mistake. I had it different in the sandbox. good job spotting that. I updated the response to make it easier for others to follow. — Josh Pittman, Feb 23 '18 at 06:09
After all your help it would be sad if I wasn’t able to sort something that little out! Good call on the edit btw! Was gonna mention the handleUpdate. I also needed to add the back ticks like last time! — Al-m, Feb 23 '18 at 06:34

Kodanda Rama Durgarao poluri · Answer 2 · 2018-02-11T16:52:19.700

As they are two seperate field values you need to handle them in two seperate functions. You cannot do in the same method onInputChange. you may change your code as below.

constructor(props){
    super(props);
    this.state =  {
      post:{
             title: props.post.title || '',
             body: props.post.body|| '',
     },

  };

    this.onTitleChange = this.onTitleChange .bind(this);
    this.onBodyChange = this.onBodyChange .bind(this);
    this.onHandleUpdate = this.onHandleUpdate.bind(this);
}


  componentDidMount(){
    database.ref(`posts/${this.props.match.params.postId}`) 
    .on('value', snapshot => {
          this.setState({post: snapshot.val()});
    });
    this.postId= this.props.match.params.postId;

}
  onTitleChange(e){
    this.setState({

      post: { ...this.state.post,
       title: e.target.value}
    });
  }

  onBodyChange(e){
    this.setState({
      post: { ...this.state.post,
       body: e.target.value}
    });
  }

  onHandleUpdate(e){
    console.log(this.postId);
    e.preventDefault();
    database.ref('posts').child(`${this.postId}`).update(this.state); 
    this.setState({
      title: '',
      body: ''    
    });
  }

  render() {
    return (

        <div className="container">
          <form onSubmit={this.onHandleUpdate}>
            <div className="form-group">
              <input value={this.state.post.title}  className="form-control" type="text" name="title" ref="title" onChange={this.onTitleChange}/>
            </div>
              <br/>
            <div className="form-group">  
              <input value={this.state.post.body} className="form-control" type="text" name="body" ref="body" onChange={this.onBodyChange} />
              <br/>
            </div>
            <button  className="btn btn-success">Submit</button>
          </form>
        </div>

    );
  }

or if state is set from componentDidMount your constructor may be like this

constructor(props){
    super(props);
    this.state =  {
      post: null,  //hope you post contains title and body {title: 'sometitle', body: 'somebody'}
  };

Hi! Appreciate the reply but i got an TypeError: undefined is not an object (evaluating 'props.post.title’). — Al-m, Feb 11 '18 at 16:36
modified answer. Please check. That will only work if you receive the post as props — Kodanda Rama Durgarao poluri, Feb 11 '18 at 16:36
Yes! I added that now and it’s back to how it was before. Not letting me type or edit the data — Al-m, Feb 11 '18 at 16:38
Follow these debug steps. Check the values you are getting in onTitleChange and onBodyChange. Check whether they are being called. Also check the value in setState callback — Kodanda Rama Durgarao poluri, Feb 11 '18 at 16:41
Actually, I noticed something. Instead of that, the input field start off blank, then when I hit a key, the original data pops up and then refuses to let me update but when i submit it simply adds the first letter I typed into it... I don’t even know what could possibly be causing such a bug — Al-m, Feb 11 '18 at 16:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/164925/discussion-between-kodanda-rama-durgarao-poluri-and-al-m). — Kodanda Rama Durgarao poluri, Feb 11 '18 at 16:52

score 0 · Answer 3 · answered Jun 11 '19 at 21:00

0

You can handle the changes on the same method

handleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}

answered Jun 11 '19 at 21:00

Mikey developer

1
1

How do I make a React component editable?

3 Answers3