CODEWITHSUNDEEP
javascriptreactjs
ShridharK
ShridharK

Reputation: 385

Trying to map inside of map in ReactJS

I'm trying to map inside of a map function but I'm getting an error saying that data.map is not a function.

Here is the code:

     <table class="table table-bordered table-striped" style={{ fontSize: 10, fontWeight: "bold" }}>
                                    <tbody>
                                        {
                                            props.data.body.table.tableData.map((data, idx) => (
                                                <tr key={idx}>
                                                    <td>
                                                        {
                                                            data.map((newdata, idx2) => (
                                                                {newdata}
                                                            ))
                                                        }
                                                    </td>
                                                </tr>
                                            ))
                                        }
                                    </tbody>
                                </table>

What's the issue here?

I also get a syntax error if I bind my newData with Object.values like this: {Object.values(newData)}

If I console.log 'data', I get this: Essentially, I just want values instead of keys.

enter image description here

Upvotes: 0

Views: 589

Answers (3)

SuperManEver
SuperManEver

Reputation: 2362

I assume you want to achieve something like this

 <tr key={idx}>
   {Object.values(data).map((newdata, idx2) => (<td key={idx2}>{newdata}</td>))}
 </tr>

Also, you should avoid like this props.data.body.table. You need to use destructuring, e.g.

const { data: { body } } = props

and so on.

I also would consider checking whether data is actually available to use. What I mean by that is any on an object in between props.data.body.table can be null or undefined which leads to runtime error.

Upvotes: 1

ShridharK
ShridharK

Reputation: 385

After a lot of head-scratching, got the answer. I built up the solution of @SuperManEver and just made a slight modification to his code where I added Object.values to it. And surprisingly it worked!

   <tr key={idx}>
      {Object.values(data).map((newdata, idx2) => (<td key={idx2}>{newdata}</td>))}
   </tr>

The objective of this code was me trying to dynamically add rows and columns to a table simply based on the data passed.

Upvotes: 0

Mikhail Grechka
Mikhail Grechka

Reputation: 735

This happens because you're trying to call an array method '.map' on non-array value.

To solve this, check that all values are arrays inside data.

If it is intended that some values can be not arrays, you can use optional chaining.

data?.map((newdata, idx2) => (
  {newdata}
))

It will check if data exists, and if it doesn't, React will render nothing.

If it wasn't intended to have objects, use Object.values(data).map(...rest of the code)

Upvotes: 2

Related Questions