How to clear the input after posting the data through fetch and making the code execute successful

Question

I'm new to react, have created a chat using reactjs. I'm using "POST" request through fetch to post new message for a particular conversation. My Objective is when i send a message, then it should clear the input but unable to clear the input after sending message. Need to write for error also.. Anyone can help me in this?

myCode:

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

  handleSend = event => {
    const { phonNo } = this.props.phonNo;
    event.preventDefault();
    console.log("phone : " + "+" + phonNo);
    this.setState({ toPhoneno: phonNo });
    console.log("phonefkjdk : " + "+" + this.state.toPhoneno);
    const data = {
      toPhoneno: "+" + this.state.toPhoneno,
      body: this.state.body
    };
    fetch("/api/messages", {
      method: "POST",
      body: JSON.stringify(data),
      headers: { "Content-Type": "application/json" }
    })
      .then(res => res.json())
      .then(() => {});
  };

  render () {
    return (
      <div>
        <input
          className="sendMessage"
          onChange={this.handleChange}

        />
        <Button onClick={this.handleSend} className="sendBtn" icon>
          <Icon name="send" color="blue" />
        </Button>
      </div>
    );
  }

Can anyone help me in this ? Thanks in advance

I don't think you need to save your `toPhoneno` into state. Your object destructuring is incorrect as well, it should be `const { phonNo } = this.props;`. Your `` is not controlled as you didn't pass in `value` props to it. You can `setState` to clear the input if it is a controlled component. — junwen-k, Nov 26 '19 at 06:14
Possible duplicate of [React - clearing an input value after form submit](https://stackoverflow.com/questions/46539480/react-clearing-an-input-value-after-form-submit) — akhtarvahid, Nov 26 '19 at 06:27
@Chandan you want to make your input field empty after posting to backend right? — akhtarvahid, Nov 26 '19 at 06:34
@dev_junwen - Where do i need to give setState? i mean below the fetch or do we need to write in onClick function? — Chandan, Nov 26 '19 at 06:36
@VahidAkhtar - Yes, Here we're using fetch and that Link i've saw and made modification according to my requirement but it doesn't work — Chandan, Nov 26 '19 at 06:37

score 0 · Answer 1 · answered Nov 26 '19 at 06:17

You can clear it end of the fetch Promise chain.

fetch("/api/messages", {
      method: "POST",
      body: JSON.stringify(data),
      headers: { "Content-Type": "application/json" }
    })
      .then(res => res.json())
      .then(() => {
        this.setState({ sendMessage: "" })
      });

input should be controlled and it should have a name.

  render () {
    return (
      <div>
        <input
          className="sendMessage"
          name="sendMessage"
          value={this.state.sendMessage}
          onChange={this.handleChange}

        />
        <Button onClick={this.handleSend} className="sendBtn" icon>
          <Icon name="send" color="blue" />
        </Button>
      </div>
    );
  }

How to clear the input after posting the data through fetch and making the code execute successful

1 Answers1

Linked