ReactJS – Dynamically Adding Multiple Input Fields

Create Dynamic Forms in React Using React Hook Forms

index.js

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

app.js

import React, { Component } from 'react';
import './style.css';

export default class App extends Component {
  state = {
    countries: [],
  };

  addCountry() {
    console.log('state : ', this.state.countries)
    this.setState({countries: [...this.state.countries, ""]})
  }

  handleChange(e, index){
    this.state.countries[index] = e.target.value

    //set the changed state...
    this.setState({countries: this.state.countries})
  }

  handleRemove(index){
    this.state.countries.splice(index,1)
    console.log(this.state.countries, '$$$')
    this.setState({countries: this.state.countries})
  }

  handleSubmit(e) {
    console.log(this.state, 'sss')
  }

  render() {
    return (
      <div className="App">
        <h1>The Form</h1>
        <label>Address </label>
        {this.state.countries.map((country, index) => {
          return (
            <div key={index}>
              <input
                onChange={(e) => this.handleChange(e, index)}
                value={country}
              />
              <button onClick={()=> this.handleRemove(index)}>Remove</button>
            </div>
          );
        })}
        <button onClick={(e)=> this.addCountry(e)} >Add Country</button>
        <button onClick={(e)=>this.handleSubmit(e)}  >Submit</button>
      </div>
    );
  }
}