CODEWITHSUNDEEP
reactjsformsinputresponsivemultiple-input
Kürşat Karslı
Kürşat Karslı

Reputation: 15

Creating Multiple Input on React

Home Component

Data-Form Component

useInput Component

Table Component Output of Code (I can't add 3. row)

I would like to get input and put it table as table data. But ı can add only one triple data I cant add a second row. The second question is I would like to reset input boxes when I submit the form how could I do it.third question is how could ı make empty table at the beginning(I could not describe empty object). I dont need to save it on Json or any database ı just wanted to add when I open website. I mean it will be temporary data. Thank you for Helping :)

Upvotes: 2

Views: 107

Answers (1)

Nishant Kumar
Nishant Kumar

Reputation: 955

var inputData = []  //Global

const DataFormComponent = () => {
  const [formData, setFormData] = useState({data1: "", data2: "", data3:""})
  const handleSubmit = (event) => {
         event.preventDefault();
         setFormData({...formData, data1, data2, data3})  //spread operator and also duplicate properties in object gets assigned the new value         
         inputData.push(formData);
         console.log(inputData);
         setFormData({data1: "", data2: "", data3: ""}
  }

  return(
     <form onSubmit = {handleSubmit}>
        <input name = "data1" type = "txt"/>
        <input name = "data2" type = "txt"/>
        <input name = "data3" type = "txt"/>
        <button type = "submit">SUBMIT FORM</button>
      </form>
    )
  }

export default DataFormComponent

Upvotes: 1

Related Questions