Make a message disappear after sometime in react

Question

Am currently working a react.js app and using express on the backend. Am able to fetch and display a response(message) from backend on form submission but I want it to disappear after sometime. Can someone please advise me on how to go about it. I know how to this in plain javascript... I want the react way. Below is my code

import React, { Component } from 'react';
import axios from 'axios';

class Subscribe extends Component {
  state={
    message: ''
  }

  newSubscriber(newSubscriber){
    axios.post('/subscribe', newSubscriber)
    .then(res =>{
      // console.log(res.data.message)
      this.setState({message: res.data.message})
    })
    .catch(err => console.log(err)
  );
  }

  componentDidMount(){
    setTimeout(() => this.setState({message:''}), 3000);
  }

  onSubmit = e => {
    e.preventDefault();
    const newSubscriber = {
      email: this.refs.email.value
    }
    this.newSubscriber(newSubscriber);
  }
  render() {
    return (
      <form style={{marginTop:'20px'}} onSubmit={this.onSubmit}>
        <div style={{background:"green", color:"white", textAlign:"center"}}>{this.state.message}</div>
        <div className="form-group">
          <label htmlFor="email">Subscribe to get updates</label>
          <input type="email" ref="email" className="form-control" placeholder="Email address..." />
        </div>
        <button type="submit" className="btn btn-primary">Send</button>
      </form>
    );
  }
}

export default Subscribe

Thanks in advance.

Answer 1

Use componentDidUpdate life cycle which will be called right after component updated

componentDidUpdate(){
    setTimeout(() => this.setState({message:''}), 3000);
  }

Answer 2

For example you could start a timer when you set a message, not when component were mounted.

class Subscribe extends Component {
  state={
    message: ''
  }

  newSubscriber(newSubscriber){
    axios.post('/subscribe', newSubscriber)
    .then(res =>{
      // console.log(res.data.message)
      this.setState({message: res.data.message})
      this.hideTimeout = setTimeout(() => this.setState({message: ''}), 3000)
    })
    .catch(err => console.log(err)
  );
  }

  // clean up in case there is pending update
  componentWillUnmount() {
    clearTimeout(this.hideTimeout)
  }

 /* you don't need this
  componentDidMount(){
    setTimeout(() => this.setState({message:''}), 3000);
  } */

  // rest of your code
}

Or you could use componentDidUpdate method to check if this.state has message while prevState has empty message and start a timeout in that case.

class Subscribe extends Component {
  state={
    message: ''
  }

  newSubscriber(newSubscriber){
    axios.post('/subscribe', newSubscriber)
    .then(res =>{
      // console.log(res.data.message)
      this.setState({message: res.data.message})
    })
    .catch(err => console.log(err)
  );
  }

  componentDidUpdate(_, prevState){
    if (this.state.message && !prevState.message) {
      this.hideTimeout = setTimeout(() => this.setState({message:''}), 3000);
    }
  }

  // clean up in case there is pending update
  componentWillUnmount() {
    clearTimeout(this.hideTimeout)
  }

  // rest of your code
}

Answer 3

You can try like this

import React, { Component } from 'react';
import axios from 'axios';

class Subscribe extends Component {
  state={
    message: ''
  }

  newSubscriber(newSubscriber){
    axios.post('/subscribe', newSubscriber)
    .then(res =>{
      // console.log(res.data.message)
      this.setState({message: res.data.message})
      setTimeout(() => this.setState({message:''}), 3000);
    })
    .catch(err => console.log(err)
  );
  }

  componentDidMount(){
    this.setState({message:''})
  }

  onSubmit = e => {
    e.preventDefault();
    const newSubscriber = {
      email: this.refs.email.value
    }
    this.newSubscriber(newSubscriber);
  }
  render() {
    return (
      <form style={{marginTop:'20px'}} onSubmit={this.onSubmit}>
        <div style={{background:"green", color:"white", textAlign:"center"}}>{this.state.message}</div>
        <div className="form-group">
          <label htmlFor="email">Subscribe to get updates</label>
          <input type="email" ref="email" className="form-control" placeholder="Email address..." />
        </div>
        <button type="submit" className="btn btn-primary">Send</button>
      </form>
    );
  }
}

export default Subscribe