Commit29 //JS React [Updating UIs w/ Stateful Components]

I am studying JavaScript React with @skillcrush, in this module we will cover updating UIs with stateful components

I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!

---

👽 Greetings travelers! We are diving back into our JS React course with Skillcrush. Last week definitely got away from me in terms of my coding goals. However, I did spend at least 10mins every day quizzing myself using the Mimo app (@getmimo). It’s been a fun addition to my daily habits.

I decided to do a “digital detox” day last week and it was really nice to just turn all of my devices off, hang out with the pets, sit in nature, rest in bed while reading a book, and just not have the incessant commotion of my devices going off, vying for my attention. It’s not something I feel comfortable doing on a weekly basis, but it did give my brain space to put my phone down and be present.

Last week I also watched Brené Brown’s Atlas of the Heart on HBO. I highly recommend it. During my career break, kind of like my digital detox day, I have been working to take time to step back and look at my surroundings. Trying to determine where I can shift and change in my life. I know it’s a luxury to take time to do this. I hope everyone, even through their busy-ness, can find time to take a step back and reflect.

That said, let’s dive back in to React!

Stateful Components

STATEFUL COMPONENTS
manage their own data in addition to using JSX to render a piece of the UI

Build a stateful component:

1. Use the Component class

2. Initialize state

3. Write a render method

4. Add event listeners to JSX

5. Write event handlers to update state

6. Use state in your JSX

CLASSES
a type of function that allow you to bundle related variable & functions

When working in JavaScript…

A function that belongs to a class → METHOD

A variable that belongs to a class → PROPERTY

STATE
where you store the data model for a react application

INITIALIZING STATE
assigning a starting value for the data you’ll be managing

RENDER METHOD
returns the JSX you want to show when your UI is rendered

EVENT LISTENERS
special attributes that you can add to JSX elements to call a function when a type of event occurs

EVENT HANDLERS
update the component’s state when a certain event happens

Writing Stateful Components

import React, { Component } from "react";
import ReactDOM from "react-dom";
class RandomApp extends Component {
  state = { value: 0 };
  getRandomNumber = () => Math.floor(Math.random() * this.props.max);
  handleClick = () => {
    this.setState({ value: this.getRandomNumber() });
  };
  render() {
    return (
      <div className="App">
        <h1>{this.state.value}</h1>
        <button onClick={this.handleClick}>Get Random Number</button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<RandomApp max={80} />, rootElement);

GitHub Repo

All of this just does not seem to be clicking right now. Like it’s all familiar, but I’m still not grasping fully how it functions. I’m hoping that I can just keep going and let all of this information slowly seep into my brain. More challenges will hopefully help it click!

Wire Up The Lights

Challenge time! We are going to take the light switch project from module 2 and add some functionality!

Honestly… is there like a JavaScript React for “dummies” or like just some way that it can be walked through more step by step for me? I’m just not getting it right now.

I commented out what I attempted before looking at the solution code, so you can see all of that here in my CodeSandbox.

My feeling is that I need repetition and and a bunch of different case scenarios. For this challenge, it stated in the App.js file to add the event handler, but it didn’t say to place it specifically in the App component, so to begin with I was off track and don’t feel like I would have known that. Unless I’m just missing the concept all together with JS React and not understanding that it’s OBVIOUS that it should go in the component.

Sorry, I digress. On to the next!

The Perfect Team

Two light switches! This challenge it appears we will be syncing up the two switches.

Maybe I’m just making this far more complicated than it needs to be. I got like 1/3 of it right and then missed the rest, even though they served all the pieces of code up. It’s just about placement for me.

My CodeSandbox

Stateful Hotel Filters

On to our third challenge. It looks like we are going to make the filters functional through stateful components

Ultimately this challenge only had us write two lines of code to complete it. It’s not that I don’t want to do many steps in a challenge, I would just prefer if each step was more clear and explicit. This is probably a downfall of me not quite understanding the terminology being used, but it just isn’t clear to me where I am typing the code.

This is why I like code-along videos that start from scratch where the instructor narrates what they are doing and why. That way I can begin to grasp each step taken.

My CodeSandbox

I feel like this is me today….

Changing Components from Functional to Stateful

For this one we have a code-along video with the instructor… so I’m going to slip into that like warm bath and let my confused brain drown.

In this challenge we are changing the previous name tag challenge from functional to stateful components.

Basically we changed the data to pull from an array within the main JS file, instead of a data.js file. Then the lines of code were written in that new stateful form.

My CodeSandbox

This is setting the scene for being able to have the end user add/remove their own names to the name tag generator without editing the code.

Quiz: Updating UIs with Stateful Components

Well… here we go! I already feel like I’m not grasping these concepts. So let’s see what I remember for the quiz.

Question #2: The place you store the data model in React is called:

INCORRECT

Your Answer: Props

Correct Answer: State

I guess Props was from a previous module, I should have known we were learning about states in this module.

Question #7: Event handlers are functions that are called by:

INCORRECT

Your Answer: Functional components

Correct Answer: Event listeners

For me it was between these two answers. I googled it and saw more references to “functions” than anything, so I went with it.

Otherwise I got them all right. REALLY hoping this all starts to make sense soon.

OK. I’m done for the day. Time to go play with the dog and enjoy the sunshine.

---

HELP! How did you learn JS React? Any courses or challenges you would recommend? Please leave me a comment!

---