A Day of Problem Solving
Today I set out to fix what I thought would be a simple tweak: I didn't want a user to be able to submit a partially full form. This resulted in my discovering the Object.entries() method - which looks like it could be extremely useful in the future.
In my own words:
Object.entries() can be used to loop over all key[value] pairs in a Javascript object. It returns an array of arrays. Each smaller array is composed so that the item at index 0 will be your key, and the item at index 1 will be your value. It does not mutate the original object, which is helpful when you're working with stateful components in React and only want to change your state within setState().
I also felt like my initial dropdown menu solution was taking up way too many lines of code for how little it was accomplishing, and remembered that there's a <select> tag that is exactly what I was looking for! The roadblock there was finding a way to set a default value without using "selected" inside the option tag, because React won't let you. My error message advised me to look into using the attribute "defaultValue" on one of my options, which would have been very easy to implement before I had decided to enter all of my titles in an array and loop through them to create my <option> tags. I decided to put a blank option as my "defaultValue", which has the added benefit of making the initial field look blank, so a user can't think that the top option has been selected automatically when they haven't actually clicked on anything.
Right now, each of my forms is only generating a generic "Please complete all fields" message when a submission is lacking a field - ideally I would like to signal with CSS or specific error messages exactly what is missing. I have written custom error messages for each field and included it as a data file (not necessary, but good practice) but they aren't currently being used at all.
I am currently trying to get to the root of the "Warning: [react-router] You cannot change <Router routes>; it will be ignored" message that I get whenever I submit a name. From other people's examples on Google, it seems as though the source of my problem is that I have a Home Page where the form is located, but it is passing the user's name up to my top Parent component (which is where I am implementing react-router.) I had done that specifically so that all of the child components would have access to the user's name, but I will have to look into that tomorrow.
In my own words:
Object.entries() can be used to loop over all key[value] pairs in a Javascript object. It returns an array of arrays. Each smaller array is composed so that the item at index 0 will be your key, and the item at index 1 will be your value. It does not mutate the original object, which is helpful when you're working with stateful components in React and only want to change your state within setState().
I also felt like my initial dropdown menu solution was taking up way too many lines of code for how little it was accomplishing, and remembered that there's a <select> tag that is exactly what I was looking for! The roadblock there was finding a way to set a default value without using "selected" inside the option tag, because React won't let you. My error message advised me to look into using the attribute "defaultValue" on one of my options, which would have been very easy to implement before I had decided to enter all of my titles in an array and loop through them to create my <option> tags. I decided to put a blank option as my "defaultValue", which has the added benefit of making the initial field look blank, so a user can't think that the top option has been selected automatically when they haven't actually clicked on anything.
Right now, each of my forms is only generating a generic "Please complete all fields" message when a submission is lacking a field - ideally I would like to signal with CSS or specific error messages exactly what is missing. I have written custom error messages for each field and included it as a data file (not necessary, but good practice) but they aren't currently being used at all.
I am currently trying to get to the root of the "Warning: [react-router] You cannot change <Router routes>; it will be ignored" message that I get whenever I submit a name. From other people's examples on Google, it seems as though the source of my problem is that I have a Home Page where the form is located, but it is passing the user's name up to my top Parent component (which is where I am implementing react-router.) I had done that specifically so that all of the child components would have access to the user's name, but I will have to look into that tomorrow.
Comments
Post a Comment
Thank you for reading my blog! I look forward to hearing from you.