Creating Multiple Input on React

Question

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 :)

Nishant Kumar · Answer 1 · 2021-03-04T12:32:38.997

1

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

edited Mar 04 '21 at 12:32

answered Mar 03 '21 at 03:16

Nishant Kumar

691
1
11
31

I mean I get 3 input from my form and these 3 input directly going my table but if ı want add another inputs its not getting – Kürşat Karslı Mar 03 '21 at 10:57
You didn't find my solution helpful to your last 2 questions? – Nishant Kumar Mar 03 '21 at 11:53
İts very useful sorry i didnt mention about it thank you :) – Kürşat Karslı Mar 04 '21 at 11:55
No problem buddy, I wish to help you further until you accept my answer. – Nishant Kumar Mar 04 '21 at 12:25
1

You're not storing your inputs. Do this- Create an empty array and push the input values into this array and then you can console.log array values, Okay :) – Nishant Kumar Mar 04 '21 at 12:28

Creating Multiple Input on React

1 Answers1