Rendering table's data header in reactjs

Question

I could render the herader's table users through for exemple: {user[name]}. But I couldn't render the header itself who is the [name] for example rendering: name of Leanne Graham. Can anyone help me with this?

 import React from 'react'

        const Users= ({ users}) => {
           return (
                 <div>
                    {users.map((user,index) => (
                       <div key={index}> 
                          <div className="container smcontainer d-flex justify-content-start"> 
                             <div className="row">
                             <div className="col-md-12">
                                <table className="table table-striped">
                                         <thead>

                                         </thead>
                                      <tbody>
                                         <tr>
                                            <td className=""> {user['id']} </td>  
                                            <td className=""> {user['name']} </td>  
                                            <td className=""> {user['username']} </td>  
                                            <td className=""> {user['email']} </td>   
                                         </tr>
                                      </tbody>
                                </table> 
                             </div> 
                          </div> 
                       </div>
                       </div>
                    ))}   
                 </div>
           )}
        export default Products

This is the App component

 class App extends Component {
      constructor(props){
        super(props)
          this.state= {
            users: [], 
        } 
      }
        async componentDidMount() {
              const url = ('https://jsonplaceholder.typicode.com/users')
              const response = await fetch (url)
              const data = await response.json() 
              this.setState({users: data.itemsList})
              console.log({users: data.itemsList})        
                 }

          render() {
            return (
              <Users users = {this.state.users} />
            )
          }
      }
    export default App;

I'm tying to render the keys of table (the header). I succeded to render the value of keys. But couldn't render their values, in <th> section above. — Mosalah
– Mosalah, Commented Oct 7, 2019 at 21:57
Are you trying to make a table of users or a separate table for each individual user? — Chris B.
– Chris B., Commented Oct 7, 2019 at 23:33

Chris B. · Accepted Answer · 2019-10-07 23:41:05Z

When you map over an array, whatever you return is returned each time for every element in the array. This code will create a whole new table for each user.

I think what you want to do is define your column headers separately from your map call and then map over the array to generate the rows:

const columns = ["ID", "Name", "Username", "Email"];

...

<div>
        <div className="container smcontainer d-flex justify-content-start"> 
           <div className="row">
            <div className="col-md-12">
               <table className="table table-striped">
                 <thead>
                    {columns.map(c => <th>{c}</th>)}
                 </thead>
                 <tbody>
                    {users.map((user, index) => (
                       <tr>
                         <td className=""> {user['id']} </td>  
                         <td className=""> {user['name']} </td>  
                         <td className=""> {user['username']} </td>  
                         <td className=""> {user['email']} </td>   
                       </tr>
                   ))}
                 </tbody>                 
                </table> 
            </div> 
          </div>
        </div>
      </div>

I made a Codepen demonstrating both ways, but to me the first one makes much more sense.

aligumustosun · Accepted Answer · 2019-10-06 01:32:54Z

0

That should give you what you want.

<thead> {user['name']} <thead/>

If you want to take the first name of Leanne Graham, you can do:

<thead> {user['name'].split(" ")[0]} <thead/>

answered Oct 6, 2019 at 1:32

aligumustosun

16210 bronze badges

1 Comment

Mosalah Over a year ago

I wanna to get the name it self as a header (the keys). Render for example Id, Name, Username, and email.

Collectives™ on Stack Overflow

Rendering table's data header in reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related