Using one function to handle multiple ‘onChange’ attributes

With this blog post, I intend to explain how to create a function that handles multiple ‘onChange’ attributes for form submits within react by examining my own mistake with the concept. For my project, I intended to have the user be able to insert information into different text bars that would post to my db.json server after they submitted it, and then display their post amongst other posts.

The functionality was there but I knew that the code could be refactored better and cause fewer headaches to write in the future if I wanted to do something similar.

I began by looking at what I was asking my code to do and then thinking about what would I need to write in order to get the function to be able to handle all the events from the user’s input. The function that would have to handle the onChange from the user needed to be fluid rather than static as I had written previously. Writing a function that would be able to handle this kind of logic would definitely involve useState just as before but I had to add something that would allow me to change the hardcoded aspect of it into something more dynamic.

The function written above seemed like it hit all of the important parameters I needed, and yet it still wasn't working. I was not able to see any real changes being rendered on my screen, because I wasn't seeing anything being rendered I was assuming that it had something to do with setting the state. Unfortunately, like all novice coders, my mistake was a simple error in where I was going to place the information.

Lower down in the code I used ‘value’ as the input and I accidently also set the value for the key to be ‘value’. Unfortunately, because I had set them both to the same thing they were unable to render onto the screen and post correctly. After I realized my mistake and made the change my code worked exactly as planned and now I had a function that could be reused as needed!