Commit30 //JS React [How to Handle Input from Users]
I am studying JavaScript React with @skillcrush, in this module we will cover how to handle input from users
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 continuing our JS React course with Skillcrush. I had an interview last week on Tuesday. I should hear back any day now or early next week. I’m anxious and excited for the opportunity. If I don’t get the job, I have to remember that it was not the right fit for me for right now. Obviously, that’s a tough message to process once you begin envisioning what the new future could be.
In the meantime, I am enjoying my time learning to code, getting to spend time with my pets(+friends and family), and take care of myself in ways that aren’t as easy when working full time.
This past weekend I joined Team Charlotte (our A team of Charlotte Roller Derby) in South Carolina for a tournament and I got to support them in playing a tough game. The facility was blistering hot (especially for those who were skating), so I brought a cooler full of ice packs and dispersed them amongst the players as they recharged for their next jam.
I’m so proud to be a part of this league and this community at large. I have learned so much and been able to grow into a better human on so many fronts. They inspire me and challenge me and give me (+and each other) so much love. 💜🥹
OK… on with the learning!
Handling User Input
This is what I’ve been waiting for. I always want to write code that folks can interact with and can be used as a tool!
UI that responds to user input:
Set initial state
White the JSX for the UI
Add your event listeners and handlers
CHANGE EVENT
JavaScript object that the onChange event listener passes to an event handler when the user types in an input element
SUBMIT EVENT
JavaScript object that the onSubmit event listener passes to an event handler when the user submits a form
Working With User Input
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class Chalkboard extends Component {
state = {
chalk: "",
notes: []
};
updateChalk = (event) => {
this.setState({ chalk: event.target.value });
};
updateNotes = (event) => {
event.preventDefault();
const newNotes = this.state.notes.slice();
newNotes.push(this.state.chalk);
this.setState({
chalk: "",
notes: newNotes
});
};
render() {
const notes = this.state.notes.map((note) => <li>{note}</li>);
return (
<div className="App">
<form onSubmit={this.updateNotes}>
<input
type="text"
placeholder="type here!"
value={this.state.chalk}
onChange={this.updateChalk}
/>
<input type="submit" />
</form>
<div className="board">
<h1 className="chalk">{this.state.chalk}</h1>
</div>
<ul className="notes">{notes}</ul>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Chalkboard />, rootElement);
The instructors provided us with this chalk board / to do list app. I removed all the code and re-typed it along with the instructional video. The CSS was already provided.
This is the beginning of something I really want to do in the future. I love tracking tasks and projects for managing my personal life. I use a couple different apps right now that I enjoy, but at some point I’d like to build on it, while also keeping it simple, if possible. Kind of a mixture between Apple’s native task app, habitica and some things I’d like to add to it.
Build Your Name Tag Text Inputs
For this challenge we are going to build on the name tag challenge used for a few modules now. They already added the ability to “delete” name tags. Now we are going to create the ability to add new ones.
There is a code along video, so I’m going to utilize that for this challenge.
Basically what we covered so far was adding the form submission text field and button.
import React, { Component } from "react";
class UserInput extends Component {
state = {
name: ""
};
updateName = (e) => {
this.setState({ name: e.target.value });
};
handleSubmit = (e) => {
e.preventDefault();
this.setState({ name: "" });
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Add first name here"
value={this.state.name}
onChange={this.updateName}
/>
<input type="submit" value="Create Name Tag" />
</form>
);
}
}
export default UserInput;We also used e.preventDefault(); and this.setState({ name: "" }); to prevent the page from reloading when we click submit and to reset the text field back to blank.
We also set the new JS file to import into App.js
That was it for this challenge. On to the next to finish it!
Finish Making Your Name Tag Generator Interactive
Another code-along video!
Now we can add and remove names!
addName = (name) => {
const newNames = [name, ...this.state.names];
this.setState({ names: newNames });
};We wrote a new method in the App.js file so that we could add new names to the names array.
handleSubmit = (e) => {
e.preventDefault();
this.props.addName(this.state.name);
this.setState({ name: "" });
};We added the this.props.addName(this.state.name) to the handleSubmit to call the addName method.
I also emptied out the names array upon first loading so that there are no pre-existing name tags that would need to be deleted.
My CodeSandbox - play with the name tag generator here!
Quiz: Handle User Input
Here we go… let’s see what I learned!
Magically enough…. I got them all correct. So either I’m learning or they were super easy questions/answers to decipher. I guess we’ll give this one to me, for now.
Over 50% finished with my JS React course. Whew!
Like I said before, I love working with input. Anything that is going to be more interactive with users… that’s my favorite. How did you learn JS React? Any courses or challenges you would recommend? Please leave me a comment!