React Toastify - Not getting error notification

Question

What I want is, when I get no data from the api, instead of this No data, I want A notification or toast.error to get displayed.

shops.jsx

import React from 'react';
import './shops.css';
import Shop from './shop'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
require('dotenv').config()
const TOKEN = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI1ZjFiMjNlYTQxNmJhMjQ3YjQ5MDk4Y2IiLCJlbWFpbCI6Img1aW1icjQ0NGQ7QHR5cC5pbiIsImlhdCI6MTU5NjgxMTU5MSwiZXhwIjoxNTk2ODE1MTkxfQ.UyrUkbNWzenf50FL8AZE1iZaii11P7MwdXpKmoCB9nM";
class Shops extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shops: []
    };
  }
  componentDidMount() {
    console.log(process.env.REACT_APP_BaseURL);
    // replace with correct URL: http://localhost:5000/api/shops/allShops
    fetch(process.env.REACT_APP_BaseURL, {
      method: "get",
      headers: new Headers({
        Authorization: `Bearer ${TOKEN}`
      })
    })
      .then(response =>response.json())
      .then(data => {
        this.setState({ shops: data.fetchedShops });
        toast.success("API LOADED SUCCESSFULLY","SUCCESS");
      })
      .catch(err =>{
        console.log("Error", err);
        if(err){
          toast.error("error occured");
        }
      });
  }
  render() {
    const shops =
      this.state.shops.length > 0 ?
        this.state.shops.map(item => (
          <Shop name={item.shopname} address={item.address} mobile={item.phoneNumber} />
        ))
        : <span >No data</span>;
        console.log(this.state.shops);
    return <div id="container">{shops}</div>;
  }
}
export default Shops;

In the 6th line you can see <span >No data</span> instead of this I want a toast.error notification, but when I write toast.error("No data"); instead of this span i got something like this instead of error notification

Answer 1

If you want to toast that there is no data when the array is empty it needs to be done in two steps since render is a pure function, i.e. without side effects

1. Issue toast side-effect in component lifecycle functions, i.e. componentDidMount and/or componentDidUpdate
2. Render null when toasting no data, or since the map can handle empty arrays without issue, just return the empty map result array

Code

class Shops extends Component {
  state = {
    shops: []
  };

  checkShops = () => {
    const { shops } = this.state;

    if (!shops.length) {
      toast.error("No Data");
    }
  };

  componentDidMount() {
    this.checkShops(); // not really needed if fetch for data first
  }

  componentDidUpdate() {
    this.checkShops();
  }

  render() {
    const { shops } = this.state;

    return (
      <div id="container">
        {shops.map((item) => <div>Data</div>)}
      </div>
    );
  }
}