I am trying to display the content of an object, but the Material UI component TableCell won't show it.

It is weird because I do the same with the Title component and it does show it.

function RecordContent({ repos, selected }) {
  var language = {}
  switch (selected) {
    case "EU":
      selected = "EU";
      language  = repos[0].terms;
      break;
    case "ES":
      selected = "ES";
      language = repos[1].terms;
      break;
    case "EN":
      selected = "EN";
      language = repos[2].terms;
      break;
  }

  const [open, setOpen] = React.useState(true);
  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <ThemeProvider theme={mdTheme}>
      <Box sx={{ display: 'flex' }}>
        <Box
          component="main"
          sx={{
            backgroundColor: (theme) =>
              theme.palette.mode === 'light'
                ? theme.palette.grey[100]
                : theme.palette.grey[900],
            flexGrow: 1,
            height: '100vh',
            overflow: 'auto',
          }}
        >
          <Toolbar />
          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
            <Grid container spacing={3}>
              {/* Recent Orders */}
              <Grid item xs={12}>
                <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
                  {/*It shows the content*/}
                  <Title>{language.record}</Title>
                  <Table size="small">
                    <TableHead>
                        <TableRow>
                          {/*It won't show the content*/}
                          <TableCell>{language.subject}</TableCell>
                          <TableCell>Year</TableCell>
                          <TableCell>{language.group}</TableCell>
                          <TableCell>{language.type}</TableCell>
                          <TableCell>{language.credits}</TableCell>
                          <TableCell>{language.grade}</TableCell>
                          <TableCell>{language.qualificationdate}</TableCell>
                          <TableCell align="right">{language.call}</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                      {rows.map((row) => (
                        <TableRow key={row.id}>
                          <TableCell>{row.subject}</TableCell>
                          <TableCell>{row.year}</TableCell>
                          <TableCell>{row.group}</TableCell>
                          <TableCell>{row.type}</TableCell>
                          <TableCell>{row.credits}</TableCell>
                          <TableCell>{row.grade}</TableCell>
                          <TableCell>{row.qualificationdate}</TableCell>
                          <TableCell align="right">{row.call}</TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
{/*                  <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
                    See more orders
                  </Link>*/}
                </Paper>
              </Grid>
            </Grid>
          </Container>
        </Box>
      </Box>
    </ThemeProvider>
  );
}

export default class Record extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedLanguage: 'EU',
      repos: null,
      error: null
    }

  }

  render() {
    const { selectedLanguage, repos, error } = this.props

    return (
      <React.Fragment>
          {repos && <RecordContent repos={repos} selected={selectedLanguage} />}
      </React.Fragment>
    )
  }
}

Here is a screenshot in order to give a graphical reference.

I have included an object's content in many other Material UI and HTML components and it worked always. I do not get any kind of error in the console either.

CodePudding user response：

The proper way to do this, is binding the language to a state variable and change it in useEffect depending on selected:

const [language, setLanguage] = useState({})
useEffect(() => {
  switch (selected) {
    case "EU":
      setLanguage(repos[0].terms)
      break;
    case "ES":
      lsetLanguage(repos[1].terms)
      break;
    case "EN":
      setLanguage(repos[2].terms)
      break;
    default:
      setLanguage({})
  }
}, [selected])