Displaying State data in a bootstrap Table -React Js

To display the data in a systematic way you need to have a good table so we added bootstrap table in a app.js file

The State defined as below

state= {
    contact: [
      {id : 1 , name : 'Achyut',phone: 9843450482, email: "achyut1324@gmail.com"},
      {id : 2, name: 'Achyut Neupane',phone: 9843450483 , email: "achyut1222@gmail.com"},
      {id : 3, name :'Akash Adhikari',phone: 9843450484, email: "achyut1111@gmail.com" }
    ]
  };

Create a function under the render(){

displayData= (contact) =>{
  return(
    <tr>
              <td>{contact.id}</td>
              <td>{contact.name}</td>
              <td>{contact.phone}</td>
              <td>{contact.email}</td>
            </tr>
  )
}

I named as displayData and pass the parameter contact because some data are passed while the function is called.

so in the return( section you can add the following code

  <table class="table table-dark w-50 mt-5 mx-auto">
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Name</th>
              <th scope="col">Phone</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
           {this.state.contact.map(this.displayData)}
          </tbody>
        </table>

The full code is given below

import React,{Component } from 'react';

class App extends Component {
  state= {
    contact: [
      {id : 1 , name : 'Achyut',phone: 9843450482, email: "achyut1324@gmail.com"},
      {id : 2, name: 'Achyut Neupane',phone: 9843450483 , email: "achyut1222@gmail.com"},
      {id : 3, name :'Akash Adhikari',phone: 9843450484, email: "achyut1111@gmail.com" }
    ]
  };

displayData= (contact) =>{
  return(
    <tr>
              <td>{contact.id}</td>
              <td>{contact.name}</td>
              <td>{contact.phone}</td>
              <td>{contact.email}</td>
            </tr>
  )
}

  render(){
    return(
      <div>
         <table class="table table-dark w-50 mt-5 mx-auto">
          <thead>
            <tr>
              <th scope="col">Id</th>
              <th scope="col">Name</th>
              <th scope="col">Phone</th>
              <th scope="col">Email</th>
            </tr>
          </thead>
          <tbody>
           {this.state.contact.map(this.displayData)}
          </tbody>
        </table>
            </div>
    )
  }
}
export default App;