Make a table from JSON data in React

Question

i am looking to make something like this:

Let's say that i have two arrays:

names: ["Prisma 2 Case", "PP-Bizon", ...]
imgs: ["img1.png", "img2.png", ...]

one with names and one with picture of the item. What i want to make is a table that has an image and the name in one cell.

I hav etried something like this:

<table className="table">
  <tbody>
    <tr>
      {this.state.names.map((data, i) => {
        return <th key={i}>{data}</th>;
      })}
    </tr>
    <tr>
      {this.state.imgs.map((data, i) => {
        return (
          <td key={i}>
            <img className="style" src={data} alt="" />
          </td>
        );
      })}
    </tr>
  </tbody>
</table>;

But what it did are two seperate rows. It has to by some loop because the number of owned items isnt always the same.

Thanks for your answers.

The json data you have is there a way you could fix it let's say something like this [{name: "Prisma 2 Case" image: "img1.png"}, {name: "PP-Bizon" image: "img2.png"}, ...] — Mohammad Khan
– Mohammad Khan, Commented Dec 5, 2021 at 10:56
if array are equal in size ... use i index to render imeges while mapping names ... names.map(name,i){ {render name} ... {render img using imgs[i] } } — xadm
– xadm, Commented Dec 7, 2021 at 8:57

Alireza Rezaei · Accepted Answer · 2021-12-05 10:58:47Z

2

I think the easiest way to solve this problem is create one array and each object of this array has a object that consist of name and image field. then use map and show this new array.

arr = [{name:'',image:''}]

answered Dec 5, 2021 at 10:58

Alireza Rezaei

846 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Flyaku · Accepted Answer · 2021-12-05 11:07:14Z

1

You will need only one loop to achieve what you're looking for. Depending on what you're trying to do and your style, you may need to wrap the name with a span.

Note that this will only work if your two arrays have the same length and are sorted equally (i.e first image is for the first name, and so on).

<table className="table">
  <tbody>
    <tr>
      {this.state.names.map((data, i) => {
        return (
          <td key={i}>
            <img className="style" src={this.state.imgs[i]} alt="" />
            {data}
          </td>
        );
      })}
    </tr>
  </tbody>
</table>

answered Dec 5, 2021 at 11:07

Flyaku

4781 gold badge4 silver badges7 bronze badges

Comments

Mohammad Khan · Accepted Answer · 2021-12-05 11:07:45Z

I think this is what you need for the project you are doing hope it helps, tip tho its better to make your json data into something like this [{name: "Prisma 2 Case" image: "img1.png"}, {name: "PP-Bizon" image: "img2.png"}, ...]

Please let me know if something went wrong here.

import React from "react";

function Sample() {
  const data = [
    {
      names: ["Prisma 2 Case", "PP-Bizon"],
      imgs: ["img1.png", "img2.png"],
    },
  ];

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Color</th>
          </tr>
        </thead>
        <tbody>
          {data.map(({ names, imgs }) => {
            return names.map((name, index) => (
              <tr key={name}>
                <td key={name}>{name}</td>
                <td key={name}>{imgs[index]}</td>
              </tr>
            ));
          })}
        </tbody>
      </table>
    </>
  );
}

export default Sample;

Collectives™ on Stack Overflow

Make a table from JSON data in React

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