如何有条件地渲染映射数组中的映射对象

Question

I have two different pieces of data coming into my component, sometimes an array of objects is passed in, and sometimes just an object. My goal is to loop through each object and spit out some JSX. Here is my code:

                (Array.isArray(tableData))
                    ?
                        (tableData.map(obj => {
                            (Object.keys(obj).map(key => {
                                return (
                                    <tr>
                                        <td>{key}</td>
                                        <td>{obj[key]}</td>
                                    </tr>
                                );
                            }))
                        }))
                    :
                        (Object.keys(tableData).map(key => {
                            return (
                                <tr key={key}>
                                    <td>{key}</td>
                                    <td>{tableData[key]}</td>
                                </tr>
                            );
                        }))

You can see im checking to see if the data coming in is an array, and if not loop through just a regular object. That part works fine, but if the data is an array, nothing gets displayed. What is wrong with my code that react doesnt render anything or throw any error messages?

Answer 1

Because you forgot to use return in this line:

(Object.keys(obj).map , try this:

Array.isArray(tableData))
    ?
        tableData.map(obj => {
            return Object.keys(obj).map(key => {
                return (
                    <tr>
                        <td>{key}</td>
                        <td>{obj[key]}</td>
                    </tr>
                );
            })
        })
    :
        Object.keys(tableData).map(key => {
            return (
                <tr key={key}>
                    <td>{key}</td>
                    <td>{tableData[key]}</td>
                </tr>
            );
        })

Assign the unique key to element otherwise you will get a warning.

Answer 2

Mayank's answer solves the problem, but it's a bit verbose. Recall that if you want to return the result of a single expression (eg the result of a function call or a JSX element) from an arrow function, you can omit both the curly braces and return :

Array.isArray(tableData)
  ? tableData.map(obj =>
      Object.keys(obj).map(key => (
        <tr>
          <td>{key}</td>
          <td>{obj[key]}</td>
        </tr>
      )
    ))
  : Object.keys(tableData).map(key => (
      <tr key={key}>
        <td>{key}</td>
        <td>{tableData[key]}</td>
      </tr>
    ))

I've used parentheses above just for clarity.

However, you're repeating the same code here twice, so for simplicity and readability I suggest extracting it into a function of its own:

const tableRows = obj =>
  Object.keys(obj).map(key => (
    <tr>
      <td>{key}</td>
      <td>{obj[key]}</td>
    </tr>
  )
);

// ...

Array.isArray(tableData) ? tableData.map(tableRows) : tableRows(tableData)