Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Class Based Components: Improve code and grammar #29217

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Class Based Components: Improve code and grammar #29217

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b340f36
Rename "todo" to "prevTodos" for clarity in state update
Maddily Dec 20, 2024
db5fa7b
Improve input-label connection
Maddily Dec 20, 2024
6f95bec
Fix grammar in comments and explanation
Maddily Dec 20, 2024
b7b5552
Revise Count component description in assignment section
Maddily Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions react/class_components/class_based_components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const FunctionalInput = ({ name }) => {

const handleSubmit = (e) => {
e.preventDefault();
setTodos((todo) => [...todo, inputVal]);
setTodos((prevTodos) => [...prevTodos, inputVal]);
setInputVal("");
};

Expand All @@ -46,6 +46,7 @@ const FunctionalInput = ({ name }) => {
<label htmlFor="task-entry">Enter a task: </label>
<input
type="text"
id="task-entry"
name="task-entry"
value={inputVal}
onChange={handleInputChange}
Expand Down Expand Up @@ -95,7 +96,7 @@ export default ClassInput;

A class is generally incomplete without a constructor, so let's add one.

The props, that get passed into this component, gets passed into the class's `constructor`. This, along with the `super` method, allows you to use the props in context to `this`, which, in *this* case, refers to the component. If you’re really curious about what `super` actually does, check out the [MDN docs on the `super` keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super).
The props passed into this component are passed to the class's `constructor`. This, along with the `super` method, allows you to use the props in the context of `this`, which, in *this* case, refers to the component. If you’re really curious about what `super` actually does, check out the [MDN docs on the `super` keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super).

If your component doesn't have any props, it is fine to leave the `constructor` and the `super` with no arguments.

Expand Down Expand Up @@ -131,14 +132,14 @@ class ClassInput extends Component {
return (
<section>
<h3>{this.props.name}</h3>
{/* The input field to enter To-Do's */}
{/* The input field to enter To-Dos */}
<form>
<label htmlFor="task-entry">Enter a task: </label>
<input type="text" name="task-entry" />
<input type="text" id="task-entry" name="task-entry" />
<button type="submit">Submit</button>
</form>
<h4>All the tasks!</h4>
{/* The list of all the To-Do's, displayed */}
{/* The list of all the To-Dos, displayed */}
<ul></ul>
</section>
);
Expand Down Expand Up @@ -174,7 +175,7 @@ class ClassInput extends Component {
<h3>{this.props.name}</h3>
<form>
<label htmlFor="task-entry">Enter a task: </label>
<input type="text" name="task-entry" />
<input type="text" id="task-entry" name="task-entry" />
<button type="submit">Submit</button>
</form>
<h4>All the tasks!</h4>
Expand Down Expand Up @@ -230,6 +231,7 @@ class ClassInput extends Component {
<label htmlFor="task-entry">Enter a task: </label>
<input
type="text"
id="task-entry"
name="task-entry"
value={this.state.inputVal}
onChange={this.handleInputChange}
Expand Down Expand Up @@ -260,7 +262,7 @@ For the purposes of this assignment, we take the class-based component that we b

1. Implement a delete button for each task. The delete button should remove that specific task from the state array, thus deleting the task itself! Styling isn't a priority at this moment, but the button tag should be styled by default.

1. Implement a new class component, `Count` that displays the count of the number of todos, at any given time.
1. Implement a new class component, `Count` that displays the number of todos, at any given time.

1. Implement an edit button for each task. It should replace the todo with an input field, and change the button itself to 'Resubmit', so the edits can be saved. This is a comparatively harder task, kudos for when you finish it!

Expand Down
Loading