I have a mern project,

I am fetching the data from my mongodb database and i want to show in m reactjs in a form of table.I am fetching two values phone and email and i want to show them in table

I have successfully fetched my data olny guide how i show them in the proper form of table

Admin.js

import React from 'react';
import axios from 'axios';

class Admin extends React.Component {
  state = {
    phone: '',
    email: '',
    posts: []
  };

  // componentDidMount = () => {
  //   this.getBlogPost();
  // };

  hello = () => {
    axios.get('/getuser')
      .then((response) => {
        const data = response.data;
        this.setState({ posts: data });
        console.log(data);
      })
      .catch(() => {
        alert('Error retrieving data!!!');
      });
  }

  displayBlogPost = (posts) => {

    if (!posts.length) return null;

    return posts.map((post, index) => (
      <div  className="blog-post__display">
        <table class="table table-striped table-sm">
            <tr>
              <th>email</th>
              <th>phone</th>
            </tr>
            <tr key={index}>
              <td>{post.email}</td>
              <td>{post.email}</td>
            </tr>
           </table>
      </div>
    ));
    
  };


  render() {
    return (
      <>
        <h1>
          <button onClick={this.hello} class="btn btn-danger">click here to get data</button>
        </h1>

        <div className="blog-">
          {this.displayBlogPost(this.state.posts)}
          
        </div>       
      </>
    )
  }
}


export default Admin;

Thankyou

CodePudding user response：

All developers are doing code in different ways but here is my technique.

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

class Admin extends Component {
  constructor() {
    super(props);
    this.state = {
      posts: []
    };
  }

  // LIFE CYCLE ALWAYS IN SIMPLE FUNCTION
  // async componentDidMount() {
  //   this.getBlogPost();
  // };

  hello = async () => {
    try {
      const { data } = await axios.get('/getuser');
      this.setState({ posts: data });
      console.log(data);
    } catch(e) {
      alert('Error retrieving data!!!', e);
    }
  }


  render() {
    return (
      <>
        <h1>
          <button onClick={this.hello} class="btn btn-danger">click here to get data</button>
        </h1>

        <div className="blog-">
          {this.state.posts.length && (
            <div className="blog-post__display">
              <table class="table table-striped table-sm">
                  <tr>
                    <th>email</th>
                    <th>phone</th>
                  </tr>
                  {this.state.posts.map((post, index) => (
                    <tr key={index}>
                      <td>{post.email}</td>
                      <td>{post.phone}</td>
                    </tr>
                  ))}
              </table>
            </div>  
          )}
        </div>       
      </>
    )
  }
}


export default Admin;