1
votes

La boucle For génère des lignes et ajoute un compteur dans jsx

Je veux générer des lignes (par exemple: 10 lignes) avec une boucle for dans JSX. Et aussi un compteur à l'intérieur de l'un des éléments de la ligne qui affichera l'index de la ligne.

<Grid container>
    <GridItem xs={3} sm={3} md={3}>
       Key {counterOfRowIndex}
    </GridItem>
    <GridItem xs={7} sm={7} md={7}>
       <input type="text"/>
    </GridItem>
    <GridItem xs={2} sm={2} md={2}>
       <FormControlLabel
          control={
            <Checkbox
               checked={this.state.checked}
               onChange={this.handleChangeCheck('checked')}
               value={checked}
            />
          }
       />
    </GridItem>
</Grid>

http://prntscr.com/m6f2rn

Voici mon résultat attendu

javascript reactjs

2 commentaires

Utilisez quelque chose comme ceci {Array (10) .map ((_, index) => )} et encapsulez une ligne dans le composant correspondant.

@ChristianIvicevic merci pour la réponse! J'ai essayé la même solution avant que vous ayez répondu mais cela ne fonctionne pas. Je ne sais pas si j'ai fait une erreur quelque part

3 Réponses :

0
votes

Au lieu d'une boucle for, vous pouvez utiliser la méthode .map () qui générera un nouveau tableau d'éléments en utilisant l'élément d'un tableau existant.

Vous pouvez faire quelque chose comme

<Grid container>
    yourArray.map((item, index) => {
        return(
           <GridItem xs={3} sm={3} md={3}>
                Key {index + 1}
           </GridItem>
           <GridItem xs={7} sm={7} md={7}>
                <input type="text"/>
           </GridItem>
           <GridItem xs={2} sm={2} md={2}>
           <FormControlLabel
               control={
            <Checkbox
               checked={this.state.checked}
               onChange={this.handleChangeCheck('checked')}
               value={checked}
            />
          }
          />
           </GridItem>
     )
    })
</Grid>

0 commentaires

0
votes

Vous pouvez essayer ceci:

const arrayOfNumbers = Array.from(Array(10).keys());
<Grid container>
  {arrayOfNumbers.map(currentVal => 
     <React.Fragment>
       <GridItem xs={3} sm={3} md={3}>
           Key {currentVal}
        </GridItem>
        <GridItem xs={7} sm={7} md={7}>
           <input type="text"/>
        </GridItem>
        <GridItem xs={2} sm={2} md={2}>
           <FormControlLabel
              control={
                <Checkbox
                   checked={this.state.checked}
                   onChange={this.handleChangeCheck('checked')}
                   value={checked}
                />
              }
           />
        </GridItem>
     <React.Fragment>
  )}
</Grid>

0 commentaires

0
votes

Vous avez donc d'autres réponses valides ici, mais voici un moyen de rendre ces lignes avec un peu plus de structure. Essentiellement la même chose que les autres, mais pousse ce que vous essayez de faire un peu plus près de votre objectif.

class Row extends React.Component {
    render () {
        return (
            <React.Fragment>
                <GridItem
                    xs={3}
                    sm={3}
                    md={3}
                    key={`col-1`}>
                    {this.props.children}
                </GridItem>
                <GridItem
                    xs={7}
                    sm={7}
                    md={7}
                    key={`col-2`}>
                    <input type="text" />
                </GridItem>
                <GridItem
                    xs={2}
                    sm={2}
                    md={2}
                    key={`col-3`}>
                    <FormControlLabel
                        control={
                            <Checkbox
                                checked={this.state.checked}
                                onChange={this.handleChangeCheck}
                                value={checked}
                            />
                        }
                    />
                </GridItem>
            </React.Fragment>
        );
    }

    handleChangeCheck = index => {
        return this.props.onChangeCheck(index);
    }
}

class Table extends React.Component {
    render () {
        const rows = Array.from(Array(10).keys());

        // This below expects `this.handleChangeCheck('checked')` to return a new function accepting the row index as its param.
        const rowEls = rows.map(( row, i ) => (
            <Row
                key={`row-${i}-${row}`}
                onChangeCheck={this.handleChangeCheck('checked')}>
                Key {i}
            </Row>
        ));

        return (
            <Grid container>
                {rowEls}
            </Grid>
        );
    }
}

0 commentaires