How to repeat a React element an indefinite number of times?

Question

I am building a form that lets users fill out names of an indefinite number of animals. At the end of the questions is clickable text that reveals the option to fill in another animal's name. How do I let this process occur an indefinite number of times, as right now I can click it once to reveal the extra field, but then cannot click it again.

Because each field needs to be individually checked with the backend database, each extra field cannot be overwritten when they appear and are filled out.

Below is my code snippet and a screenshot of the page after the extra field has been revealed.

Thanks in advance

const CustomModel = (props) => {
  const { classes, ...rest } = props;

  const [showNextAnimal, setShowNextAnimal] = React.useState(false);
  const onClick = () => setShowNextAnimal(true);

  const AnotherAnimal = () => (
    <div>
      <h4>What other animal are you looking for?</h4>
      <div className={classes.inputbar}>
        <InputBase
          placeholder="Enter name of animal"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          inputProps={{ 'aria-label': 'description' }}
        />
      </div>
      <br />
    </div>
  );

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <GridContainer>
        <GridItem xs={12} sm={12} md={12}>
          <Paper className={classes.paper}>
            <h2>Create a new model</h2>
            <Divider />

            <h4>Name?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Feel free to be creative!"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'name' }}
              />
            </div>
            <br />
            <h4>Description</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter your description"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            <h4>What animal are you looking for?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter name of animal"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            {showNextAnimal ? <AnotherAnimal /> : null}
            <div>
              <h4 onClick={onClick}>+ Add another animal</h4>
              <br />
            </div>
            <Button
              color="primary"
              variant="contained"
              type="submit"
              className={classes.continueButton}
              // onClick={(updateFormValues, handleClick)}
            >
              Review
            </Button>

            <br />
          </Paper>
        </GridItem>
      </GridContainer>
      <StickyFooter />
    </main>
  );
};

export default withStyles(styles)(CustomModel);

Answer 1

You should use a count variable and then, on click of Add new animal , increment the count variable. In the body, display <AnotherAnimal /> for count number of times.

const CustomModel = (props) => {
  const { classes, ...rest } = props;

  const [countOfOtherAnimals, setCountOfOtherAnimals] = React.useState(0);
  const onClick = () => setCountOfOtherAnimals(countOfOtherAnimals + 1);

  const AnotherAnimal = () => (
    <div>
      <h4>What other animal are you looking for?</h4>
      <div className={classes.inputbar}>
        <InputBase
          placeholder="Enter name of animal"
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput,
          }}
          inputProps={{ 'aria-label': 'description' }}
        />
      </div>
      <br />
    </div>
  );

  return (
    <main className={classes.content}>
      <div className={classes.toolbar} />
      <GridContainer>
        <GridItem xs={12} sm={12} md={12}>
          <Paper className={classes.paper}>
            <h2>Create a new model</h2>
            <Divider />

            <h4>Name?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Feel free to be creative!"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'name' }}
              />
            </div>
            <br />
            <h4>Description</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter your description"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            <h4>What animal are you looking for?</h4>
            <div className={classes.inputbar}>
              <InputBase
                placeholder="Enter name of animal"
                classes={{
                  root: classes.inputRoot,
                  input: classes.inputInput,
                }}
                inputProps={{ 'aria-label': 'description' }}
              />
            </div>
            <br />
            {
              [...Array(countOfOtherAnimals)].map((e, i) => (
                <AnotherAnimal key={i} />
              ))
            }
            <div>
              <h4 onClick={onClick}>+ Add another animal</h4>
              <br />
            </div>
            <Button
              color="primary"
              variant="contained"
              type="submit"
              className={classes.continueButton}
              // onClick={(updateFormValues, handleClick)}
            >
              Review
            </Button>

            <br />
          </Paper>
        </GridItem>
      </GridContainer>
      <StickyFooter />
    </main>
  );
};

export default withStyles(styles)(CustomModel);