[Dúvida] Não entendi o exercicio.

Oi

Vou apontar algumas observações e possíveis esclarecimentos:

1. Lista de Restaurantes: A lista de restaurantes está sendo obtida de uma chamada assíncrona para a API usando o http.get. O resultado é armazenado no estado restaurantes usando o setRestaurantes.

2. Renderização da Tabela: A tabela está sendo renderizada usando o componente Table do Material-UI. Parece que há um problema com a renderização dos nomes dos restaurantes e os botões de ação.

3. Problema com a Renderização: A renderização da lista de restaurantes dentro da tabela parece estar incorreta. A estrutura do código dentro do método map não está correta. Parece que falta o retorno de JSX dentro do map.

Aqui está uma versão corrigida do trecho de código relacionado à renderização dos restaurantes na tabela:

return (
  <>
    <Typography variant="h4">Restaurantes</Typography>
    <Table sx={{ minWidth: 650 }} aria-label="simple table">
      <TableHead>
        <TableRow>
          <TableCell>Nome</TableCell>
          <TableCell>Ações</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {restaurantes?.map((restaurante) => (
          <TableRow key={restaurante.id}>
            <TableCell>{restaurante.nome}</TableCell>
            <TableCell>
              <Link variant="button" component={RouterLink} to={`/dashboard/restaurantes/${restaurante.id}`}>
                <IconButton aria-label="editar">
                  <Edit />
                </IconButton>
              </Link>
              <IconButton aria-label="deletar" onClick={() => remover(restaurante)}>
                <Delete />
              </IconButton>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </>
);

Essa versão corrige a estrutura de renderização e adiciona cabeçalhos à tabela. Certifique-se de adaptar isso ao seu código e veja se resolve o problema que você está enfrentando. Se você tiver mais informações ou detalhes específicos sobre o problema, ficarei feliz em ajudar mais.

Suporte horrivel da alura

Para aqueles que estão em duvida e não podem contar com o suporte da Alura, assim como eu. Segue a minha resolução!!

//src/pages/Administration/Restaurant/AdmissionRestaurant

import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IRestaurant from '../../../interfaces/IRestaurant';
import { Grid, IconButton, Link, Typography } from '@mui/material';
import { Delete, Edit } from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom'
import { useState, useEffect } from 'react';
import http from '../../../http';

const Restaurants = () => {
  const [restaurants, setRestaurants] = useState<IRestaurant[]>()
  useEffect(() => {
    http.get<IRestaurant[]>('/restaurantes/')
      .then(response => setRestaurants(response.data))
  }, [])
  const deleted = (restaurant:IRestaurant) => {
    http.delete(`/restaurantes/${restaurant.id}/`)
      .then(() => {
        if (restaurants) {         
          setRestaurants([
            ...restaurants.filter(x => x.id !== restaurant.id)
          ])
        }
      })
  }
  return (
    <>
      <Grid container>
        <Grid item xs>
          <Typography component="h1" variant="h6">
            Restaurantes
          </Typography>
        </Grid>
        <Grid item>
          <Link
            variant="button"
            component={RouterLink}
            to="/admin/restaurantes/novo"
          >
            Novo
          </Link>
        </Grid>
      </Grid>
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>Nome</TableCell>
              <TableCell colSpan={2}>Ações</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {restaurants?.map((restaurant) => (
              <TableRow key={restaurant.id}>
                <TableCell>
                  {restaurant.nome}
                </TableCell>
                <TableCell>
                  <Link
                    variant="button"
                    component={RouterLink}
                    to={`/admin/restaurantes/${restaurant.id}`}
                  >
                    <IconButton aria-label="editar">
                      <Edit />
                    </IconButton>
                  </Link>
                  <IconButton aria-label="deletar" onClick={() => deleted(restaurant)}>
                    <Delete />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}

export default Restaurants;

//src/pages/Administration/Restaurant/RestaurantForm

import { Box, Typography, TextField, Button } from '@mui/material';
import { SyntheticEvent, useRef, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import http from '../../../http';
import IRestaurant from '../../../interfaces/IRestaurant';

const FormRestaurant = () => {
  const params = useParams();
  const [name, setName] = useState('')
  
  const refInput = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (params.id) {
      http.get<IRestaurant>(`/restaurantes/${params.id}/`)
        .then(response => setName(response.data.nome))
    }
  }, [params])

  const whenSubmittingForm = (event: SyntheticEvent ) => {
    event.preventDefault();
    if (params.id) {
      http.put<IRestaurant>(`/restaurantes/${params.id}/`, {
        "nome": refInput.current?.value
      })
      .then(() => {
        alert("Restaurante atualizado com sucesso!")
    })
    } else {
      http.post<IRestaurant>(`/restaurantes/`, {
        "nome": refInput.current?.value
      })
      .then(() => {
        alert("Restaurante cadastrado com sucesso!")
    })
    }
  };
  return (
    <>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <Typography component="h1" variant="h6">
          Formulário de restaurante
        </Typography>
        <Box component="form" sx={{ mt: 1 }} onSubmit={whenSubmittingForm}>
          <TextField
            required
            inputRef={refInput}
            margin='dense'
            id="nome"
            label="Nome"
            type="text"
            fullWidth />
          <Button type='submit' fullWidth variant="contained">Salvar</Button>
        </Box>
      </Box>
    </>
  );
}

export default FormRestaurant;