I don't know how to stop showing data like this? although I want to display this in a sequence in list in!

[billy.s56]

App.jsPreformatted text

function App() {

  const contacts = [ {
    "id": "1",
    "name": "Affi phuck",
    "email": "phucksheikh111@gmail.com"
  },
  {
    "id": "2",
    "name": "Usman Bazmi",
    "email": "bazmi69@hotmail.com"
  },
  {
    "id": "3",
    "name": "Jawad",
    "email": "Jojo111@gmail.com"
  },
  {
    "id":"4",
    "name":"fadi",
    "email":"fadi21@gmail.com"
  }]
  return (
    <div className="App">
      <DisplayList  contacts={contacts}/>
    </div>
  );
}

export default App;

displayList.js

import React from 'react';

function displayList(props) {

        
   const renderList = props.contacts.map((contact)=>{
    return (
            <div>
                <div className="card" style={{width:"70%"}}>
                    <div className="card-header" >
                        <h3>Contact List</h3>
                    </div>
                </div>
                <div className="card-body" style={{width:"70%"}}>
                    <table className="table table-striped">
                        <thead>
                            <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>{contact.id}</th>
                                <td>{contact.name}</td>
                                <td>{contact.email}</td>
                                    <td>
                                        <button className="btn btn-outline-primary" style={{marginRight:"7px"}}><i class="bi bi-pencil-square"></i></button>
                                        <button className="btn btn-outline-danger"><i className="bi bi-trash-fill"></i></button>
                                    </td>
                            </tr>
                        </tbody>
                    </table>
                 </div>
        </div>
        );
   });
   return(
        <div>
            {renderList}
        </div>
   )
}

Output:

[alirezaghey]

I’m not very clear about your question, but from the image I assume that you want the header to render only once for all the data.
If that is what you want to solve, you need to move all the parts that you don’t want to repeat out of map, otherwise they will repeat for each element in the array that map acts on.
For instance, your code could look something like the following:

import React from "react";

function displayList(props) {
  const renderedLists = props.contacts.map((contact) => {
    return (
      <tr>
        <th>{contact.id}</th>
        <td>{contact.name}</td>
        <td>{contact.email}</td>
        <td>
          <button
            className="btn btn-outline-primary"
            style={{ marginRight: "7px" }}
          >
            <i class="bi bi-pencil-square"></i>
          </button>
          <button className="btn btn-outline-danger">
            <i className="bi bi-trash-fill"></i>
          </button>
        </td>
      </tr>
    );
  });

  return (
    <div>
      <div className="card" style={{ width: "70%" }}>
        <div className="card-header">
          <h3>Contact List</h3>
        </div>
      </div>
      <div className="card-body" style={{ width: "70%" }}>
        <table className="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Email</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>{renderedLists}</tbody>
        </table>
      </div>
    </div>
  );
}

I haven’t run or tested this, so the may be bugs.
Hope this helps.

[billy.s56]

Yeah it solved the rendering but it seems like this

[alirezaghey]

Functionally, it is working now. You just need to put in the css and probably html structure.
One way to make it easier on yourself is to put together the plain working html/css and once you are happy with the structure and styling disassemble it in terms of react.