Generating a table from object array

Question

If I have a state like so:

 state = {
    Data: [
      {
          inputArr: [1, 2, 3],

      },
      {
         inputArr: [1, 2, 3],

      },
      {
          inputArr: [1, 2, 3],

      }
    ]
  };

and I want to make a table from the input Arr so that I will have 3 rows 3 cols and it will be in order, 123,123,123

I thought about double map but it doesn't work, is there a better way?

const test=this.state.data.map( (val)=>{
   val.map( (val2)=>{
 <tr>
    return (
  <th> val2 </th>
      )
    }
 </tr>
}

That should actually work fine. You're just not returning anything from your first map though, also val2 should be between curly brackets. Let me know if that works. — Bernardo Siqueira
– Bernardo Siqueira, Commented Sep 26, 2018 at 14:40
You had to access val.inputArr instead of val, and also the opening of the tr tag should be outside the map. Try this: codesandbox.io/embed/q8zl5p9x5q — Bernardo Siqueira
– Bernardo Siqueira, Commented Sep 26, 2018 at 15:30

Shubham Khatri · Accepted Answer · 2018-09-26 15:49:31Z

1

You should have a nested map and return JSX elements from both of them

const test= this.state.Data.map((val, index)=>{
     return (
        <tr key={index}>
           {val.inputArr.map((val2)=>{
                return (
                  <th key={val2}>{val2}</th>
                )
            })}
        </tr>
     )
}

You also need to provide a key for the elements

class App extends React.Component {
  state = {
    Data: [
      {
          inputArr: [1, 2, 3],

      },
      {
         inputArr: [1, 2, 3],

      },
      {
          inputArr: [1, 2, 3],

      }
    ]
  };

  render() {
    const test= this.state.Data.map((val, index)=>{
         return (
            <tr key={index}>
               {val.inputArr.map((val2)=>{
                    return (
                      <th key={val2}>{val2}</th>
                    )
                })}
            </tr>
         )
    })
    return <div>{test}</div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>

edited Sep 26, 2018 at 15:49

answered Sep 26, 2018 at 15:08

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

Alexander Over a year ago

this does not compile.

Alexander Over a year ago

"," expected and the field goes red, you know compilation error

MrCode · Accepted Answer · 2018-09-26 16:26:52Z

1

I see you already accepted an answer but I would like to elaborate on what was wrong with your code.

render() {
  const test=this.state.Data.map((val, index1)=>(
    <tr key={index1}>
      {val.inputArr.map( (val2, index2) => <td key={index2}>{val2}</td> )}
    </tr>
  ))

  return <table>{test}</table>;
}

Fiddle demo

JavaScript is case sensitive, your property is Data not data.
Take care using the correct {} or () with arrow functions. Using {} means you can make multiple statements and explicitly return something. Using () will automatically return the expression.
To output a value in React wrap it in {} like I did with {val2}
Given your data structure, you must use the inputarr propety when accessing the inner array.
Use a key on element lists. You can read about keys in react here.

answered Sep 26, 2018 at 16:26

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

1 Comment

Alexander Over a year ago

thank you for your contribution, you cleared some things for me

Collectives™ on Stack Overflow

Generating a table from object array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related