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 · Accepted Answer · 2021-03-04 12:32:38Z

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 4, 2021 at 12:32

answered Mar 3, 2021 at 3:16

Nishant Kumar

1,0153 gold badges17 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kürşat Karslı Over a year ago

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

Nishant Kumar Over a year ago

You didn't find my solution helpful to your last 2 questions?

Kürşat Karslı Over a year ago

İts very useful sorry i didnt mention about it thank you :)

Nishant Kumar Over a year ago

No problem buddy, I wish to help you further until you accept my answer.

Nishant Kumar Over a year ago

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

Collectives™ on Stack Overflow

Creating Multiple Input on React

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related