1

Preciso de ajuda para escrever um map em uma pagina no react, so que dentro desse map vai ter outro map, so que antes de chegar nesse segundo map ele deve renderizar um dados dados do primeiro map, o codigo atual está assim:

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

e eu preciso que ele fique desse jeito

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

Quando eu faço o código acima, ele manda esse erro:

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

como eu posso fazer para chamar a função no estilo do segundo código?

2 Respostas 2

2

Você precisa colocar os <td>s dentro de um Fragment.

Você pode fazer isso usando diretamente a tag <Fragment> ou simplesmente <>.

Segue o novo código:

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

Código funcionando: https://codesandbox.io/s/great-moon-dmnow?file=/src/App.js

3
  • Obrigado, era isso mesmo que eu precisava :v 25/05/2020 às 22:02
  • @HiranJúnior peço que aceite a resposta então, por gentileza.
    – pharoeste
    25/05/2020 às 22:52
  • Como eu faço isso? Sou novo aqui :V 26/05/2020 às 23:35
1

Tem uma outra forma, fica como outro exemplo que é unindo os retornos, exemplo:

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>

Outra forma é com componentes alinhados que ao meu ver é uma boa solução:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .