Nettoyage des balises Material UI répétitives

Question

Je suis en train de créer un CV en utilisant React et Material UI. Je commence à me retrouver avec beaucoup de grilles avec des éléments de liste qui contiennent différentes informations. Je me demande si une boucle prenant les données d'un tableau ou d'un objet fonctionnera dans mon cas et quelle est la meilleure façon de l'aborder.

En fait, ce code se répète 4 ou 5 fois, mais il contient toutes des données différentes. J'ai pensé à utiliser une boucle mais la taille du premier élément de la grille est xs={4} et la grille horizontale a une taille de xs={8} mais sans icône.

<Grid item xs={4}>
  <List>
    <ListItem>        
      <ListItemIcon >
        <School className={classes.icon}/>
      </ListItemIcon>
      <ListItemText 
        primary={
          <React.Fragment>
            <Typography className = {classes.school} variant="body1">
              The name of the school I attended goes here
            </Typography>
          </React.Fragment>
        }
        secondary="Year I attended this school"
      />
    </ListItem>
  </List>
</Grid>

<Grid item xs={8}>
  <List>
    <ListItem>        
      <ListItemText 
        primary={
          <React.Fragment>
            <Typography className = {classes.school} variant="body1">
              The certificate I received from that school goes here
            </Typography>
          </React.Fragment>
        }
        secondary="The subjects I completed as part of this certificate"   
      />
    </ListItem>
  </List>
</Grid>

Ça ressemble à ça dans le navigateur :

<Icon> School 1                           Web Dev Certificate
2019                                      Topics: ...

<Icon> School 2                           Web Dev2 Certificate
2018                                      Topics: ...

<Icon> School 3                           Web Dev3 Certificate
2018                                      Topics: ...

<Icon> School 4                           Web Dev4 Certificate
2017                                      Topics: ...

<Icon> School 5                           Web Dev5 Certificate
2017                                      Topics: ...

Je veux réduire tous ces codes répétitifs, si possible.

Answer 1

Vous pouvez utiliser props pour ça. Tout d'abord, créez un composant en utilisant le code qui sera répété :

function RepeatingComponent(props) {
  return (
    <Grid item xs={4}>
      <List>
        <ListItem>
          <ListItemIcon >
            <School className={classes.icon} />
          </ListItemIcon>
          <ListItemText
            primary={
              <React.Fragment>
                <Typography className={classes.school} variant="body1">
                  {props.nameOftheSchool} // props
            </Typography>
              </React.Fragment>
            }
            secondary={props.yearAttended} //props
          />
        </ListItem>
      </List>
    </Grid>

    <Grid item xs={8}>
      <List>
        <ListItem>
          <ListItemText
            primary={
              <React.Fragment>
                <Typography className={classes.school} variant="body1">
                  {props.theCertificate} // props
            </Typography>
              </React.Fragment>
            }
            secondary={props.theSubject} // props
          />
        </ListItem>
      </List>
    </Grid>
  );
}

export default RepeatingComponent;

Et ensuite vous avez besoin d'un composant qui appellera tous ces RepeatingComponent et render puis passer les props :

import RepeatingComponent from 'path_to_component'

function ComponentToRender(props) {
  return (
    <Fragment> // every React component has to be inside of only one tag, the Fragments does nothing to the code, just hold other tags
      <RepeatingComponent nameOftheSchool="name1" yearAttended="year1" theCertificate="certificate1" theSubject="subj1" />
      <RepeatingComponent nameOftheSchool="name2" yearAttended="year2" theCertificate="certificate2" theSubject="subj2" />
      <RepeatingComponent nameOftheSchool="name3" yearAttended="year3" theCertificate="certificate3" theSubject="subj3" />
    // ... as many as you want
    </Fragment>
  );
}

Vous pouvez même les organiser dans un .json et utiliser une carte pour créer ces balises de composants et réduire encore plus la duplication du code.