19
Day 3 of #100daysofcode: React-bootstrap Components
Have you ever been working in a new language and right when you start feeling confident, you realize that something you've been using does not function at all the way you thought it did? Let me walk you through today's journey of how some capital letters caused me to forget React worked. Or maybe it was the lower-cased letters. It was probably a combination
Today I played around with React-bootstrap components a bit like a kid in a sandbox. I threw some components at my app with no real thought for design, I just tried to see how they ticked.
While messing around with components, I decided to fix my input method for artist IDs in my song display app. The only problem was that I was trying to use React-bootstrap-styled input boxes, and that cause significantly more confusion than it probably should have. More on this later.
I think the biggest hurdle today was learning about how to pass arguments to the components. More specifically, it was learning which arguments you can pass to them. As someone with limited React/JS experience, seeing React-components immediately made me think that I should try and figure out which arguments they expect to see. Components feel sort of like classes or methods from other languages; you import them because they have their own logic you want to use (and reuse) that logic. Classes and methods expect certain input or constructors, and won't accept other types of input that they don't handle. While I think this is still probably the case for React components, what I didn't realize is that there are so many global arguments that are applicable. That is to say: just because it isn't explicitly listed in the React-bootstrap API for that component doesn't mean it isn't applicable.
Let me give you an example:
Above is an example of InputGroup from React-bootstrap's documentation. Being how I am, I decided to copy-paste this code and immediately jump into trying to use it to figure out its quirks.
The very first question I decided to try and solve was: how do I access this input and make it useful? Looking at this component, it appears that the text value is stored in the id "basic-addon1", because that's the ID of the InputGroup's Text! Wrong, it's just a decorator that is showing an @ before the text box. What else can it be?
Unfortunately from here, I got really into the weeds and started messing with things that were not helpful. To not dwell on this too much, I'll just list them out real quick. I researched aria-label and aria-describedby hoping to be able to use them to reference the input value. My conclusion on the aria values is that you may be able to use them to access the text input, but it really seemed like overkill for the scope of my project. Next I attempted using ref and inputRef to access the input values. Again, I ran into a lot of trouble implementing any sort of way to access the data, even though I found a bunch of Stackoverflow answers.
One answer would say that you should use inputRef instead of ref to access the data, others would say to use ref instead of inputRef. Many answers seemed sure that you should create a new component class to contain the InputGroup and FormControl, however it felt like a very odd way to handle accessing the input. Why would you import an InputGroup component into another component, just to get the value of the text?
So after stubbornly trying to get to the bottom of these React-bootstrap components and why they were so much more complicated, I decided to take a break and just read some more tutorials on general React.
One of the very first things I found was using getElementById and I nearly facepalmed. getElementById was one of the very first things I learned about in React, I used it to retrieve data being sent up from my Python Flask server.
I decided to stick with the tutorial a little bit longer, and they introduced an argument that I had not seen before:onChange. In 10 minutes of learning about basics,I learned two solutions to a problem that I had spent the better part of an hour trying to solve.
Quickly summarizing the solution, I can use onChange={(e)=>...} to retrieve the text every time it changes, or I can simply set id="uniqueId" and retrieve it elsewhere using `document.getElementById("uniqueId").value.
What makes this worse is that I already knew this. I have used them in the past on html-style forms in React. Whenever the React-bootstrap components entered the picture, its like I forgot everything I already learned! Doh.
The bright-side of all of this is that I feel I have a much greater grasp of how these components resolve themselves in the bigger picture.
The downside is that I think my app has gotten much uglier than it was before. It gets worse before it gets better I guess!
On the way out, I'll quickly go over a list of the components I've implemented into my page so far: ListGroup, InputGroup, Form, Buttons and Alerts.
Here's a quick list of what I did today:
Read through some of the React-bootstrap documentation
Implemented a few React-bootstrap components into my app
Struggled through some input and state shenanigans (above)
Began creating the UI for a group project I'm working on
I have much less time tomorrow to work on things, so I will likely have a much shorter update. I probably will look into some CSS styling tomorrow and see how to shape my page a little better. I was going to do that today, but I think learning the components that fit into the shape makes more sense to learn first. I think I'm going to try to utilize Grid and Flexbox from CSS.
Right now I'm struggling on the crossroads between CSS and React. HTML and CSS feels fairly simple in comparison to React and CSS. There's odd syntax (such as className instead of class) and other interactions I'm not quite used to yet. I imagine it will make more sense once I try it out more.
Following the first couple days of this challenge, I think it might be a good idea to have a quick section that's dedicated to briefly describing what I'm struggling on, hence above. I think in general, I'm going to shape my blogs as followed:
In-depth Discussion (Optional)
Today
Tomorrow
What I'm Struggling on
I may not always have time to type out some kind of in-depth discussion, or maybe I won't always have something to say about what I worked on that day. So I won't try and force it, I'll just include it if I really have something to share. I imagine if things go perfectly, I probably won't be sharing a whole lot, so take no discussion as a good thing.
If you're reading this and you're thinking: "Hey this guy is missing this really obvious thing..." You're probably right! If that's you, please share it's greatly appreciated
19