I'm using the DenseTable component of the ui material and wanted to break a string into parts

here is my table:

I want in the cursos column, in the line that has LEIT - 1st Ano/LEE - 1st Ano I want to break the string where there is the '/'

below my DenseTable component code:

function createData(aulaID, numAula, tipoAula, nome, curso, data, acao) {
  return { aulaID, numAula, tipoAula, nome, curso, data, acao };
}


export default function DenseTable() {
  const { selectedRow, setSelectedRow, cursoSigla } = useListarAulas();
  const [rows, setRows] = React.useState([]);

  const {
    showLancarSumarioModal,
    handleOpenLancarSumarioModal,
    handleCloseLancarSumarioModal,
  } = useEscreverSumario();

  const {
    aulas,
    // docente,
  } = useFiltrarAulas();

  React.useEffect(() => {
    if (rows.length !== aulas.length) {
      const tempRows = [];
      aulas.map((aula) =>
        tempRows.push(
          createData(
            aula.id,
            aula.numero,
            aula.tipo,
            aula.disciplina.codigo,
            cursoSigla(aula.cursos),
            aula.data,
            'Lançar Sumario'
          )
        )
      );
      setRows(tempRows);
    }
  }, [aulas, rows]);

  return (
    <>
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
          <TableHead>
            <TableRow>
              <TableCell>Disciplina</TableCell>
              <TableCell align="right">Curso</TableCell>
              <TableCell align="right">Data</TableCell>
              <TableCell align="right">Acção</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow
                key={row.nome}
                sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
              >
                <TableCell component="th" scope="row">
                  {row.nome}
                </TableCell>
                <TableCell align="right">{row.curso}</TableCell>
                <TableCell align="right">
                  {row.data}
                  {/* moment(row.data).format('yyyy-MM-DD') */}
                </TableCell>
                <TableCell align="right">
                  <Button
                    size="small"
                    onClick={() => {
                      setSelectedRow(row);
                      handleOpenLancarSumarioModal();
                    }}
                  >
                    {row.acao}
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>

      <EscreverSumarioModal
        showModal={showLancarSumarioModal}
        handleCloseModal={handleCloseLancarSumarioModal}
        selectedRow={selectedRow}
      />
    </>
  );
}

the function cursoSigla() in useEffect receives a courses object where their respective acronyms are and returns a string concatenated with the acronym of each course like this "LEIT - 1º Ano/LEE - 2º Ano" below the function code:

function cursoSigla(cursos) {
    const sigla = [];

    if (cursos.length > 1) {
      if (sigla.length !== cursos.length) {
        cursos.map((curso) => sigla.push(`${curso.sigla} - ${curso.ano}º Ano`));
        return sigla.join('/');
      }
    }

    if (cursos.length === 1) {
      sigla.push(cursos[0].sigla);
      return `${sigla[0]} - ${cursos[0].ano}º Ano`;
    }

    console.log(sigla);

    return '';
  }

My question is how to introduce a line break in my table cell ?

CodePudding user response：

Instead of rendering them as:

<TableCell align="right">{row.curso}</TableCell>

You could do something like this instead:

<TableCell>
{row.curso.split("/").map((curs, idx) => (
  <p key={idx}>{curs}</p>
))}
</TableCell>