I am a React beginner and I am having trouble with rendering an object into a table. I can access the ctx object with console.log but I cannot display it on the browser in the table. If anyone can help me please give me your advice. the code is below.
The goal is to display data from the object(ctx) into the table.
function AllData(){
const ctx = {users:[{name:'john', email:'john@email.com', passwords:'password'},{name:'smith', email:'smith@email.com', passwords:'password']};
const userdata = ctx.users.map((user)=>{
(
<tr>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.password}</td>
</tr>
)
});
return (
<table className="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
</tr>
</thead>
<tbody>
{userdata}
</tbody>
</table>
);
}
You need to return something from the .map like
const userdata = ctx.users.map((user) => {
return (
<tr key={user.name}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.password}</td>
</tr>
)
});
Or even just
const userdata = ctx.users.map((user) => (
<tr key={user.name}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.password}</td>
</tr>
));
Another option would be like
return (
<table className="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
</tr>
</thead>
<tbody>
{
ctx.users.map((user) => (
<tr key={user.name}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.password}</td>
</tr>
))
}
</tbody>
</table>
)
Also added the key property, since you are using an array.
Add return inside map
const userdata = ctx.users.map((user)=>{
return (
<tr>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.password}</td>
</tr>
)
});
There are a couple of issues with your code, the main one being that the function that you use in the .map does not return anything.
Other issues:
} in the definition of ctx.passwords vs password.key property present in the JSX elements that are returned by the map function.Below is a runnable sample with all these issues fixed.
function AllData() {
const ctx = {
users: [
{ name: 'john', email: 'john@email.com', password: 'password' },
{ name: 'smith', email: 'smith@email.com', password: 'password' }
]
};
const userdata = ctx.users.map((user)=>{
return (
<tr key={user.name}>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.password}</td>
</tr>
)
});
return (
<table className="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
</tr>
</thead>
<tbody>
{userdata}
</tbody>
</table>
)
}
ReactDOM.render(<AllData />, document.getElementById('react'));<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>
<div id="react"></div>