title: How to display data coming from mongodb to reactjs after clicking the button?
body: <p>I am making react project using express.js, mongodb, react.js, and node.js. and trying to fetch data from backend api which is running on port 5000. </p>
  
  <p>When I check the api using <code>postman</code>, it is working. And the data is showing in the browser's console. Also, when I press <code>Get</code> button as given in the code below, it doesn't work on the browser. But I'm able to see the array data in the browser's console.</p>
  
  <p><code>&lt;Button onClick={()=&gt;&lt;li&gt;{employeeItem}&lt;/li&gt;}&gt;Get&lt;/Button&gt;</code></p>
  
  <p>Here is my full code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import {
    form,
    FormGroup,
    FormControl,
    ControlLabel,
    Button
  } from "react-bootstrap";
  import "./App.css";
  import { stringify } from "querystring";
  
  class App extends Component {
    constructor(props) {
      super(props);
  
      this.AddName = this.AddName.bind(this);
      this.AddContact = this.AddContact.bind(this);
      this.AddAge = this.AddAge.bind(this);
  
      this.state = {
        name: "",
        contact: "",
        age: "",
        employees: []
      };
    }
    AddName(e) {
      this.setState({ name: e.target.value });
    }
    AddContact(e) {
      this.setState({ contact: e.target.value });
    }
    AddAge(e) {
      this.setState({ age: e.target.value });
    }
  
    componentWillMount() {
      fetch("http://localhost:5000/api/employees")
        .then(res =&gt; res.json())
        .then(data =&gt; this.setState({ employees: data }));
    }
  
    render() {
      const employeeItem = this.state.employees.map(employee =&gt; (
        &lt;div key={employee._id}&gt;
          &lt;h3&gt;{employee.name}&lt;/h3&gt;
          &lt;p&gt;{employee.contact}&lt;/p&gt;
          &lt;p&gt;{employee.age}&lt;/p&gt;
        &lt;/div&gt;
      ));
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;h1 className="App-title"&gt;Employee List&lt;/h1&gt;
          &lt;/header&gt;
          &lt;div className="Layout"&gt;
            &lt;form&gt;
              &lt;FormGroup&gt;
                &lt;ControlLabel&gt;Name:&lt;/ControlLabel&gt;
                &lt;FormControl
                  type="text"
                  value={this.state.name}
                  placeholder="Employee name"
                  onChange={this.AddName}
                /&gt;
                &lt;div&gt;
                  &lt;ControlLabel&gt;Contact:&lt;/ControlLabel&gt;
                  &lt;FormControl
                    type="number"
                    value={this.state.contact}
                    placeholder="Mobile number"
                    onChange={this.AddContact}
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;ControlLabel&gt;Age:&lt;/ControlLabel&gt;
                  &lt;FormControl
                    type="number"
                    value={this.state.age}
                    placeholder="Age"
                    onChange={this.AddAge}
                  /&gt;
                &lt;/div&gt;
              &lt;/FormGroup&gt;
              &lt;Button type="submit"&gt;Add&lt;/Button&gt;
              &lt;Button onClick={() =&gt; console.log({ employeeItem })}&gt;Get&lt;/Button&gt;
              &lt;Button type="submit"&gt;Delete&lt;/Button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/RmOfy.png" rel="nofollow noreferrer">on running page</a></p>