How to display data from 2 separate arrays in one table in React Js?

Question

In my project I need to display data from 2 separate arrays in one table and I need to make my code responsive, my code:

import "./styles.css";

export default function App() {
  const data = [
    {
      v: "car"
    },
    {
      v: "model"
    },
    {
      v: "accident"
    },
    {
      v: "owner"
    }
  ];

  const info = [
    {
      year: "2010",
      model: "bmv",
      accident: "2019",
      owner: "J.S"
    },
    { 
      year: "2012", 
      model: "bmv", 
      accident: "n/a", 
      owner: "D.W" },
    { 
      year: "2014", 
      model: "bmv", 
      accident: "2016", 
      owner: "J.B" 
    }
  ];
  return (
    <div className="App">
      <table>
        <tr>
          {data?.map((d, i) => (
            <td>{d.v}</td>
          ))}

          {info.map((d) => (
            <>
              <td>{d.year}</td>
              <td>{d.model}</td>
              <td>{d.accident}</td>
              <td>{d.owner}</td>
            </>
          ))}
        </tr>
      </table>
    </div>
  );
}

codeSandbox

I'm mapping through both arrays, result is displayed like this:

car model   accident    owner   2010    bmv 2019    J.S 2012    bmv n/a D.W 2014    bmv 2016    J.B

but I need the result to be:

car  2010           2012       2014

model bmv            bmv       bmv

accident 2019        n/a        2016

owner J.S            D.W      J.B

another problem is that I don't want to specify {d.year} or {d.model in

{info.map((d) => (
            <td>{d.year}</td>
            <td>{d.model}</td>
            <td>{d.accident}</td>
             <td>{d.owner}</td>
          ))}

because when/if new value is added (like lastOwner) it won't be displayed unless I specify {d.lastOwner}

Is there any way to actually combine data from 2 arrays and just map through all the values without specifying them? Any advice and help are greatly appreciated.

Answer 1

You can use the data array to traverse the properties of each info entry.

https://codesandbox.io/s/zealous-thunder-zoeqp?file=/src/App.js

<table>
        {/* <tr>
          {data.map((d, i) => (
            <th>{d.v}</th>
          ))}
        </tr> */}
        {info.map((entry, i) => (
          <tr>
            {data.map((d, i) => (
              <>
                {entry[d.v] && (
                  <td>
                    <strong>{d.v} :</strong>
                    {entry[d.v]}
                  </td>
                )}
              </>
            ))}
          </tr>
        ))}
      </table>

Answer 2

I am not sure what you mean by you don't want to display d.year and d.model. But to answer your question on how to you basically transpose your table, you can use something like this:

you basically use the value that is in your data table to print out the values in info table that belongs to it. So if you add more data to it, it should still print this.

I use a conditional statement as car and year is different (this has is probably something to do with your info that I didn't understand). So if it is car, then it should print out the year.

return (
<div className="App">
  <table>
    {data?.map((value) => (
      <tr>
        <th>{value.v}</th>
        {info.map((info_value) => (
          <>
            <td>
              {value.v === "car" ? info_value.year : info_value[value.v]}
            </td>
          </>
        ))}
      </tr>
    ))}
    <tr></tr>
  </table>
 </div>
);

As I am not sure how you add the data to the table or what exactly you want printed other than what you showed in your question I am not sure if this is exactly what you are looking for. But it should print out the following:

car      2010  2012 2014
model    bmv   bmv  bmv
accident 2019  n/a  2016
owner    J.S   D.W  J.B

Answer 3

this was just an issue in the html table I put inline style to fit your ui specifications but you can add this style in css stylesheet to:

import "./styles.css";

export default function App() {
  const data = [
    {
      v: "car"
    },
    {
      v: "model"
    },
    {
      v: "accident"
    },
    {
      v: "owner"
    }
  ];

  const info = [
    {
      year: "2010",
      model: "bmv",
      accident: "2019",
      owner: "J.S"
    },
    {
      year: "2012",
      model: "bmv",
      accident: "n/a",
      owner: "D.W"
    },
    {
      year: "2014",
      model: "bmv",
      accident: "2016",
      owner: "J.B"
    }
  ];
  return (
    <div className="App">
      <table style={{ display: "flex" }}>
        <thead style={{ display: "flex", flexDirection: "column" }}>
          <tr style={{display:"flex", flexDirection:"column", margin:"5px"}}>
            {data?.map((d, i) => (
              <th key={i}>{d.v}</th>
            ))}
          </tr>
        </thead>
        <tbody style={{ display:"flex"}}>
          {info.map((d, i) => (
            <tr key={i} style={{display:"flex", flexDirection:"column", margin:"5px"}}>
              <td>{d.year}</td>
              <td>{d.model}</td>
              <td>{d.accident}</td>
              <td>{d.owner}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}