0

I want to render a div component as many times a button is clicked in React JS, what should I use?

The task here was to add multiple input fields when i click the plus button, also can we use for loop here, to render elements ? This is the component I want to render multiple times on button click event:

import React from 'react'
import {Container,Col,Row,Table,Form,FormGroup,Label,Input} from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
export default function AddRemoveInputField(prop) {

    
  return (
    <div className='smallHr'>
        <div className="space"></div>
        <div><hr style={{width:
        '9rem',margin:'auto'}}/></div>
        <div className="space"></div>
        <FormGroup row>
                    <Label
                      for="exampleText"
                      sm={2} className='bold padding' 
                    >
                      Title
                    </Label>
                    <Col sm={10}>
                      <Input onChange={prop.action}
                        id="exampleText"
                        name="title"
                        type="text"
                      />
                    </Col>
                  </FormGroup>

      <FormGroup row>
                    <Label
                      for="exampleText"
                      sm={2} className='bold padding' 
                    >
                      URL
                    </Label>
                    <Col sm={10}>
                      <Input onChange={prop.action}
                        id="exampleText"
                        name="url"
                        type="text"
                      />
                    </Col>
                  </FormGroup>
                  <div className="space"></div>
                  <FormGroup row>
                  <Label 
                      for="exampleText"
                      sm={2} className='bold padding'
                    >
                      Discription
                    </Label>
                    <Col sm={10}>
                      <Input
                        id="exampleText"
                        name="discription"
                        type="textarea" onChange={prop.action}
                      />
                    </Col>
                  </FormGroup>
                  <div className="space"></div>
                  <FormGroup row>
                    <Label className='bold padding'
                      for="exampleText"
                      sm={2}
                    >
                      Source
                    </Label>
                    <Col sm={10}>
                      <Input onChange={prop.action}
                        id="exampleText"
                        name="source"
                        type="text"
                      />
                    </Col>
                  </FormGroup>
    </div>
  )
}```


The Component Looks Like This:

[enter image description here](https://i.stack.imgur.com/XnNmr.png)

I tried using for loop in the Component, but it only rendered it once.


I tried using for loop in the Component, but it only rendered it once.
lazybearwithglasses
  • 1

1 Answers1

0

It comes down to simply using states to keep track of how many input elements your user needs, updating on demand, and map over the count to display.

Try something like

//declare this on your parent component
const [inputCounter, setInputCounter] = useState(0);
//Then pass the inputCounter and setInputCounter to your child (input)     
component as props
// Increment the value as plus button clicked
onClick={() => setInputCounter((prev) => prev++)}

// Go back to your parent component and loop over your counter
<div>
 {
   Array(inputCounter).fill(0).map((_, i) => <YourInputComponent />);
 }
</div>
Nikodimos
  • 11
  • 3