I want to add the input no of fields given by the user when clicking on submit button.How to do this in react functional component.

screenshot:

I have an input field,when any user input on that field and submit,according to the input given by the user the no fields will be created.like in above screenshot if a user gives input 6 then 6 fields will be added

I am trying in this way,

    import React, { useState } from 'react'
import cal from './image/bgimg.jpg'

function Home() {
    const [state,setState]=useState({
        semester:'',
        credit:'',
        sgpa:''
    })
    const [noOfSem,setNoOfSem]=useState()

    const handleChange=(e)=>{
        setState({...state,[e.target.name]:e.target.value})
    }

    const handleClick=()=>{
        console.log('hyy',state.semester)
        setNoOfSem([state.semester])
    }

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={cal} alt="" className='imgcal img-fluid' />
                </div>
                <div className="col-md-6">
                    <div className="col-md">
                        <div className="form1">
                            <input type="number" value={state.semester} name='semester' onChange={handleChange} placeholder='Enter Total Semester' />
                            <button type="button"  onClick={handleClick}>Submit</button>
                            <div className="form2">
                            {noOfSem?.map((item,index)=>
                            <>
                            <input type="text" placeholder={`Enter your Semester ${index 1} credit`} key={index}/>
                            </>
                            )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Home

thanks......

CodePudding user response：

I think there's a few changes you can make to improve the code and get it working.

Firstly, I would avoid storing your number of semesters in both the state.semester and noOfSem state, as it means you have to update both of them to keep them in sync.

Given that your component only needs to know the number of semesters when the user presses Submit, you can remove the handleChangeCall and instead only access the value upon submit.

It is also good practice to make use of the <form onSubmit={}> and <input type='submit'> elements, to handle form submission. Instead of using the onClick event from a regular <button>. Some info here.

When using the form, you can then access the value of the semester input directly by storing a reference to it using useRef.

Then in order to iterate over the number of semester, you can construct a new Array to map over. One caveat here is that you have to call the array fill method.

See solution here:

import React, { useState, useRef } from "react";

function Home() {
  const [state, setState] = useState({
    semester: '',
    credit: "",
    sgpa: ""
  });

  const semesterInputRef = useRef();

  const handleForm1Submit = (e) => {
    e.preventDefault();
    if (semesterInputRef?.current.value) {
      setState({ ...state, semester: Number(semesterInputRef.current.value) });
    }
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <div className="col-md">

            <form className="form1" onSubmit={handleForm1Submit}>
              <input
                type="number"
                name="semester"
                ref={semesterInputRef}
                placeholder="Enter Total Semester"
              ></input>

              <input type="submit" className="btn btn-success"></input>
            </form>

            <form className="form2">
              {state.semester &&
                Array(state.semester).fill().map((_item, index) => (
                  <input
                    key={index}
                    type="text"
                    placeholder={`Enter your Semester ${index   1} credit`}
                  ></input>
                ))}
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;

I've also created a code sandbox to show that this works as expected, here.