CODEWITHSUNDEEP
javascriptreactjs
Sahil
Sahil

Reputation: 69

Table header is repeating itself react component?

This is my render method in react class. data coming properly but header repeating it self.

How to arrange this block to render table in proper format.?

Here how it looks now table

i want only one time header should display.

render() {
    return (


        <div>
          {
            this.state.data.map((dynamicData, Key) => {
              let keys = Object.keys(dynamicData);
              let d = dynamicData;
              return keys.map(data => {
                return (
                  <div style={{ border: '1px solid black' }}>

                    <table id="emp" border="1" class="table">
                       <thead class="thead-dark">
                      <tr>
                        <th>#</th>
                        <th>Company</th>
                        <th>UserId</th>
                        <th>Role</th>
                        <th>Email</th>
                        <th>Desc</th>
                        <th>Contact</th>
                        <th>Password</th>
                        <th>Action</th>
                      </tr>
                    </thead> 
                      <tbody >
                        <tr>
                          <td>{dynamicData[data].employee_id}</td>
                          <td>{dynamicData[data].first_name}</td>
                          <td>{dynamicData[data].last_name}</td>
                          <td>{dynamicData[data].email}</td>
                          <td>{dynamicData[data].phone_number}</td>
                          <td>{dynamicData[data].hire_date}</td>
                          <td>{dynamicData[data].salary}</td>
                          {/* <td>{dynamicData[data].department.department_name}</td> */}
                          <td><button value={dynamicData[data].employee_id} onClick={this.editClick}
                            className="btn  btn-primary btn-sm">Edit </button> &nbsp;&nbsp;
                             <button value={dynamicData[data].employee_id} onClick={this.handleClick}
                              className="btn  btn-danger btn-sm">Delete </button></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                );
              });
            })

          }
        </div>
    );
  }

Upvotes: 1

Views: 1356

Answers (3)

Revansiddh
Revansiddh

Reputation: 3072

const data =[
  {company:"company",userId:'userId', role:'admin'},
  {company:"company2",userId:'userId2', role:'admin2'},
] 
const TableComponent = (props)=>{
  return (
   <div>
    <div> Table Component </div>
<table id="emp" border="1" class="table">
            <thead class="thead-dark">
                <tr>
                
                <th>Company</th>
                <th>UserId</th>
                <th>Role</th>
               
                </tr>
            </thead> 
            <tbody>
            {
              data.map((item)=>{
                 return <tr>
                          <td>{item.company}</td>
                          <td>{item.userId}</td>
                      <td>{item.role}</td>
              </tr>
              })
            }
            </tbody>
</table>
</div>
  )
}



ReactDOM.render(
  <TableComponent/>,document.getElementById("root")
);
<div id='root'></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Your are iterating <thead> with table data array. Just need to put it outside above map

Upvotes: 1

akhtarvahid
akhtarvahid

Reputation: 9779

Don't Use header inside map() function to iterate

          <tbody >
          {this.state.data.map((dynamicData, Key) => {
              let keys = Object.keys(dynamicData);
              let d = dynamicData;
              return keys.map(data => {
                return (
                  <div style={{ border: '1px solid black' }}>
                        <tr>
                          <td>{dynamicData[data].employee_id}</td>
                          <td>{dynamicData[data].first_name}</td>
                          <td>{dynamicData[data].last_name}</td>
                          <td>{dynamicData[data].email}</td>
                          <td>{dynamicData[data].phone_number}</td>
                          <td>{dynamicData[data].hire_date}</td>
                          <td>{dynamicData[data].salary}</td>
                          {/* <td>{dynamicData[data].department.department_name}</td> */}
                          <td><button value={dynamicData[data].employee_id} onClick={this.editClick}
                            className="btn  btn-primary btn-sm">Edit </button> &nbsp;&nbsp;
                             <button value={dynamicData[data].employee_id} onClick={this.handleClick}
                              className="btn  btn-danger btn-sm">Delete </button></td>
                        </tr>
                  </div>
                );
              });
            })}
           </tbody>

Upvotes: 2

Vikash Dhiman
Vikash Dhiman

Reputation: 588

render() {
    return (
        <table id="emp" border="1" class="table">
            <thead class="thead-dark">
                <tr>
                <th>#</th>
                <th>Company</th>
                <th>UserId</th>
                <th>Role</th>
                <th>Email</th>
                <th>Desc</th>
                <th>Contact</th>
                <th>Password</th>
                <th>Action</th>
                </tr>
            </thead> 
            <tbody >
          {
            this.state.data.map((dynamicData, Key) => {
              let keys = Object.keys(dynamicData);
              let d = dynamicData;
              return keys.map(data => {
                return (
                  <div style={{ border: '1px solid black' }}>
                        <tr>
                          <td>{dynamicData[data].employee_id}</td>
                          <td>{dynamicData[data].first_name}</td>
                          <td>{dynamicData[data].last_name}</td>
                          <td>{dynamicData[data].email}</td>
                          <td>{dynamicData[data].phone_number}</td>
                          <td>{dynamicData[data].hire_date}</td>
                          <td>{dynamicData[data].salary}</td>
                          {/* <td>{dynamicData[data].department.department_name}</td> */}
                          <td><button value={dynamicData[data].employee_id} onClick={this.editClick}
                            className="btn  btn-primary btn-sm">Edit </button> &nbsp;&nbsp;
                             <button value={dynamicData[data].employee_id} onClick={this.handleClick}
                              className="btn  btn-danger btn-sm">Delete </button></td>
                        </tr>
                  </div>
                );
              });
            })

          }
        </tbody>
    </table>
    );
  }

Upvotes: 3

Related Questions