Table header is repeating itself react component?

Question

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

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>
    );
  }

Your header is included within the keys.map, move it outside — csilk
– csilk, Commented Dec 23, 2019 at 12:58
Because your returning it every for every entry of array. keep it outside map — Revansiddh
– Revansiddh, Commented Dec 23, 2019 at 13:01

Vikash Dhiman · Accepted Answer · 2019-12-23 13:03:08Z

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>
    );
  }

akhtarvahid · Accepted Answer · 2019-12-23 13:12:11Z

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>

Revansiddh · Accepted Answer · 2019-12-23 13:15:13Z

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

Collectives™ on Stack Overflow

Table header is repeating itself react component?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related