I need to hide the message inside div element after 5 sec of form submit using React.js. I am explaining my code below.

<div className="wrapper">
            <div ref={divEl => {
            this.divRef = divEl;
          }}></div>
            <form onSubmit={this.addItem}>
              <input ref={(a)=>this.inputElement=a} placeholder="enter task">
              </input>
              <button type="submit">{this.state.editKey? "Update": "Add"}</button>
            </form>
            <TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
          </div>
addItem(e){
    e.preventDefault();
    if(this.state.editKey){
      this.saveEditedText();
      return;
    }
    var itemArray = this.state.items;
    if (this.inputElement.value !== '') {
      itemArray.unshift({
        text:this.inputElement.value,
        key:Date.now()
      })
      this.setState({
        items:itemArray
      })
      this.divRef.innerHTML = this.inputElement.value;
      this.inputElement.value='';
      this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">Added successfully</p>');
    }
  }

Here I have after the form is submitting the success message is showing. I need after 5 sec of showing the message will remove automatically means using timeinterval.

I need to hide the message inside div element after 5 sec of form submit using React.js. I am explaining my code below.

<div className="wrapper">
            <div ref={divEl => {
            this.divRef = divEl;
          }}></div>
            <form onSubmit={this.addItem}>
              <input ref={(a)=>this.inputElement=a} placeholder="enter task">
              </input>
              <button type="submit">{this.state.editKey? "Update": "Add"}</button>
            </form>
            <TodoItems entries={this.state.items} delete={this.deleteItem} edit={this.editItem}/>
          </div>
addItem(e){
    e.preventDefault();
    if(this.state.editKey){
      this.saveEditedText();
      return;
    }
    var itemArray = this.state.items;
    if (this.inputElement.value !== '') {
      itemArray.unshift({
        text:this.inputElement.value,
        key:Date.now()
      })
      this.setState({
        items:itemArray
      })
      this.divRef.innerHTML = this.inputElement.value;
      this.inputElement.value='';
      this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">Added successfully</p>');
    }
  }

Here I have after the form is submitting the success message is showing. I need after 5 sec of showing the message will remove automatically means using timeinterval.

• javascript
• reactjs

2 Answers 2

setTimeout(() => {
  this.setState({
    items:itemArray
  });
}, 5000)

This will give you sometime.

else have a state to know when you are updating the data, and rerender the UI based on this

You could try

this.divRef.insertAdjacentHTML("beforeend", '<p className="textcolor">Added  successfully</p>');
setTimeout( () => {
    this.divRef.querySelector(':last-child').remove();
}, 5000);