Dynamically Add and Remove Input Field when Button Clicked in React JS

How to add and remove input dynamically when button is clicked and console the value in react js.
source code : ( github.com/AkajithAk/youtubeR... )
#react #dynamicinput #addRemoveDynamicInputButtonClick

[@supernico374]

This is actually really cool. I was stuck trying to figure out a good way to delete an element from my list until I found this video. I did not know you could pass a unique identifier to a particular object of the map function. Thank you very much.

[@Talgie228]

This is actually really great! It would be helpful if you also show how to add a text field with default information already inside it as well. But great video! I hope you continue making more!

[@josephawe8398]

Awesome exatly what I needed

[@julfinch]

Thank you! This solved my problem.

[@angularuser2104]

thank u so much nice and simple explanation :)

[@ashishkumar-fg7ph]

thank you bhai bahut parasan kiya tha dynamic buttons me

[@codingcomics]

I will try and let you know

[@MrManumena]

Amazing 🔥

[@dr.slasher5346]

I had a small problem while returning the Input and button , I was map inside a label tag , what should have done is to map and return label with each input , the problem was so crazy ,that I couldn't delete the last element what ever I do , so keep in mind from such a silly bug

[@aniketjain6886]

Beautiful✨❤

[@rijasm7200]

working thanks

[@ozsoytalha]

Thanks for your efforts. I have a question. In this structure how can I make the first line appear by default?

[@codingcomics]

const [val,setVal]=useState([' ']); add empty string in the useState

[@dr.slasher5346]

great one , but I got small bug , I can not delete the last input field

[@dr.slasher5346]

it works fine now , I don't know why yesterday why it was behaving like this

[@dsp_creations1217]

Hello i stuck with this can we connect some way . Many methods i tried still last index is deleting instead of selected index. Please revert

[@codingcomics]

I provided the GitHub link in the description. Take a look at the code.

[@dsp_creations1217]

const [formData, setFormData] = useState({ sapno: "", sapimage: "", pits: [{ pitno: "", pitimages: [] ,url:''}], }); with this being our form structure, the pit number and url are being deleted but the image of the last input index is being deleted and not respective to the pit number and url. please help us with this

[@codingcomics]

I think the correct index is passing for the pit number and url. The same index is not passing in the image. So maintain in a separate state and use the State. Maybe this will work

[@dsp_creations1217]

​@@codingcomics could you give your email id I will share actually what happening

[@sanketgole4199]

Bro can you make this. Table 1)Every table row has a checkbox. 2) when you click on check box delete button will appear when you click on button hole row will delete 3) delete all button also there on top of table.

[@codingcomics]

Yes. I will make video

[@theaveragecarguy770]

@@codingcomics maybe in the same video you could show how to handle multiple fields with multiple values to be added to array(array of objects)?

[@codingcomics]

Video link kzbin.info/www/bejne/Y4Wtf5hteat_frs

[@jakubdrazkowski5952]

How could I change the useState for Basic JavaScript?

[@codingcomics]

You can change Usestate to const value = []

[@jakubdrazkowski5952]

​@@codingcomics Thanks ❤️ Subscribed and like

[@user-ft9cg5ro1d]

how can i edit the test on double click

[@codingcomics]

If you want to perform an edit, you need to set all the data in the setVal.

[@user-ft9cg5ro1d]

How can I do that... Can you send me an example... Or a video pls

[@faruksardar8829]

After refreshing the page all the input field getting removed, any solution for this, Thanks for this video BTW :)

[@codingcomics]

I will try and let you know

[@faruksardar8829]

@@codingcomics Thank you so much 🫡

[@faruksardar8829]

@Coding Comics I discovered a simple solution: by storing the input value in local storage, the input field will retain its value even after the page is refreshed. This method has worked for me.

[@codingcomics]

Yes.

[@codingcomics]

Thank you

[@SafiyullaMona]

hello

[@codingcomics]

1.Initialize let val = 0 in one variable like this .2. Add condition inside add button If (val

[@codingcomics]

Try this

[@SafiyullaMona]

I can't use it to my code , thank you for the reply

[@codingcomics]

Why. Tell me the issue. I try to give solution