I'm trying to build a table from a JSON file using map in react, I've tried two ways, the first one using map and the second one using a for loop, but I got nothing.
I appreciate an ES6 based solution.
map:
const META =
[
{
"name": "CeloPunks Celo Connect Edition #377",
"image": "https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
"edition": 377
}
];
const Data = META.map(vardata = () => {
return (
<div>
<td>{vardata}</td>
</div>
)
});
console.log(Data);
for loop:
const DataAll = [];
for (let i=0; i<=META.lenght; i++){
DataAll.push(META[i]);
};
console.log(DataAll);
How to create a table from a JSON file like META using modern javascript?
you may want something like this :
const Table = () => {
const META = [
{
name: "CeloPunks Celo Connect Edition #377",
image:
"https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
edition: 377,
},
];
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Edition</th>
</tr>
</thead>
<tbody>
{META.map(({ name, image, edition }) => (
<tr key={name}>
<td>{name}</td>
<td>{image}</td>
<td>{edition}</td>
</tr>
))}
</tbody>
</table>
);
};
export default Table;
This is just a table with one line and a header, but if you change your META variable, it will loop through the array to display each line… For example with this array :
const META = [
{
name: "First Edition #1",
image: "https://first-link",
edition: 1,
},
{
name: "Second Edition #2",
image: "https://second-link",
edition: 2,
},
{
name: "Third Edition #3",
image: "https://third-link",
edition: 3,
},
];
I think you like this below:
const Table = () => {
const META = [
{
name: "CeloPunks Celo Connect Edition #377",
image:
"https://ipfs.io/ipfs/QmRX4tFHKajU9nAxwHqJjkwtvBFCNRwJXNzdqrXUA16o3Z/377.png",
edition: 377,
},
{
name: "CeloPunks Celo Connect Edition #378",
image:
"https://pbs.twimg.com/profile_images/1440251297538527243/XQLuZvwr_400x400.png",
edition: 378,
},
{
name: "CeloPunks Celo Connect Edition #379",
image:
"https://cdn.cyberbox.art/cpunk/14.png",
edition: 379,
},
];
return (
<table style={{width:'100%'}}>
<thead>
<tr>
<th>Name</th>
<th>Image</th>
<th>Edition</th>
</tr>
</thead>
<tbody>
{META.map(item => (
<tr key={name}>
<td>{item.name}</td>
<td><img src={item.image} /></td>
<td>{item.edition}</td>
</tr>
))}
</tbody>
</table>
);
};
ReactDOM.render(<Table />, document.getElementById('root'))img{
width: 100px;
}
table, th, td {
border:1px solid black;
}<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='root'></div>