Nestle 2 maps and write data inside each of them in the React

Question

I need help to write a map on a page in React, but inside this map there will be another map, so before arriving at this second map it must render a data from the first map, the current code is like this:

<tr<{generated.student.map((student) =>
            student.evaluation.map((evaluation) => (
              <td>{evaluation.grade}</td>
            ))
          )}</tr>

and I need him to stay that way

      <tr>
          {generated.student.map((student) => {
            <td>{student.name}</td>;
            student.evaluation.map((evaluation) => (
              <td>{evaluation.grade}</td>
            ));
          })}
        </tr>

When I make the above code, it sends this error:

Line 55:17:  Expected an assignment or function call and instead saw an expression

how can I make to call the function in the style of the second code?

Answer 1

You need to put the <td>s within a Fragment.

You can do this by directly using the tag <Fragment> or simply <>.

Follow the new code:

<tr>{generated.student.map(s => (
  <Fragment>
    <td>{s.name}</td>
    <td>
      {s.evaluation.map(ev => (
        <td>{ev.grade}</td>
      ))}
    </td>
  </Fragment>
))}</tr>

Code working: https://codesandbox.io/s/great-moon-dmnow?file=/src/App.js

Answer 2

There is another way, stands as another example that is joining the returns, example:

function App() {
  const students = [
   {
      name: 'name A', 
      evaluation: [
        {grade: '1'}, 
        {grade: '2'}
      ]
   },
   {
      name: 'name B', 
      evaluation: [
        {grade: '3'}, 
        {grade: '4'}
      ]
   }
  ];
  return (
    <div>      
      {students.map((student, i) => {
        const name = <div>{student.name}</div>;
        const grades = student.evaluation.map(c => (
          <div>{c.grade}</div>
        ));
        const final = [name, ...grades];
        return (final);
      })}
    </div>
  )
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Another way is with aligned components that in my view is a good solution:

function Student({name, children}) {
  return (
    <div>
      <div>{name}</div>
      <div>{children}</div>
    </div>
  );
}
function Grade({grade}) {
  return <div>{grade}</div>      
}
function App() {
  const students = [
   {
      name: 'name A', 
      evaluation: [
        {grade: '1'}, 
        {grade: '2'}
      ]
   },
   {
      name: 'name B', 
      evaluation: [
        {grade: '3'}, 
        {grade: '4'}
      ]
   }
  ];
  return (
    <div>      
      {students.map((student, i) => 
      (
        <Student name={student.name}>
          {student.evaluation.map(ev => (
            <Grade grade={ev.grade} />
          ))}
        </Student>
      ))}
    </div>
  )
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>