React unexpected number rendered

Question

I have the following React example, and I'm trying to show a success toast (from mdbootstrap library) every time the isShowing state is true. This works as expected regarding the toast, but a number is displayed next to the button, and increments after each click. This number also appears as a children of the main div from the App file ( See attached image and codesandbox link) . Thanks in advance!

import React, { Component } from "react";
import Nav from "./Navbar";
import Routes from "./Routes";
import Mes from "./Message";
import { Button, toast } from "mdbreact";
import "./App.css";

class App extends Component {
  state = {
    isShowing: false
  };

  handleClick = () => {
    this.setState({
      isShowing: true
    });
  };

  render() {
    return (
      <div className="App">
        <Mes />
        <Button color="primary" onClick={this.handleClick}>
          show Alert{" "}
        </Button>
        {this.state.isShowing ? toast.success("Success message") : ""}
        <Routes />
      </div>
    );
  }
}

export default App;

codesandbox link : https://codesandbox.io/s/l2xqplx4rm

score 2 · Accepted Answer · answered Oct 27 '18 at 08:54

You don't need to render toast.success in your code. Remove

{this.state.isShowing ? toast.success("Success message") : ""}

In above code case your binding the toast's toast.success methods response which is nothing but the active toast length. So its displaying number over there.

Just below code is enough to show toast on button click.

import React, { Component } from "react";
import Nav from "./Navbar";
import Routes from "./Routes";
import Mes from "./Message";
import { Button, toast } from "mdbreact";
import "./App.css";

class App extends Component {

  handleClick = () => {
     //show toast
     toast.success("Success message");
  };

  render() {
    return (
      <div className="App">
        <Mes />
        <Button color="primary" onClick={this.handleClick}>
          Show Alert
        </Button>
        <Routes />
      </div>
    );
  }
}

export default App;

Here is updated code

React unexpected number rendered

1 Answers1