REACT: Fill a table column-wise with array information

Question

I am a bit new with React and was wondering if it was possible to populate a table column-wise, given an array like this:

 arrayEx = ['John', '123 Address', 13, 6, 'Mike', '456 Address', 17, 5]

Where the table would look like this

Though that may be a bit extreme if anyone could help me create a table that looks like this instead,

I would appreciate that as well. I can't find a way to print a table like the 2nd picture in React. I could possibly figure out a way to make it look like the 1st picture if someone could help me get to the 2nd picture, but I thought I would ask for the 1st picture just incase someone knew, by chance.

Thank you in advance!

Answer 1

Do you have any control over the data structure? That's not a very good way to have the data organized. A more common, and convenient, structure would be

arrayEx = [ { name: 'John', address: '123 Address', age: 13, height: 6 }, ... ]

Also, you use the word table, but I'm assuming you don't have to use an actual <table> element, since your desired layout does not really call for that.

Given all that, here's how I would suggest rendering the data in React.

...
return (
  <div>
    <div>Table 1</div>
    <ul>
      {arrayEx.map((person, idx) => (
         <li>
           {person.name}
             <ul>
               <li>{person.address}</li>
               <li>{person.age}</li>
               <li>{person.height}</li>
             </ul>
         </li>
      )}
    </ul>
  </div>
)