Continuation...
The React main site page shows a component for a Todo app. Today we discuss that code.
The Todo List
The list code is a good place to start. This is the code that creates each line item shown in the GUI using a template.
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('todos-example')
);
Of interest is this code:
{
this.props.items
.map(item => (
<li key={item.id}>
{item.text}
</li>
))
}
Lets break it down...
- There is a property named 'items'
- We know 'items' should be an array due to the .map function call.
- ".map" is just a way of saying "for each item in the array send my code an 'item'.
Angular does templating a bit differently it uses html attributes for the iteration.
React, because it can; mixes JavaScript and HTML inside brackets {...}. Remember brackets indicate a code block.
- For each item we see this template.
<li key={item.id}>
{item.text}
</li>
- The code above creates a HTMLLineItem element with a "key" of "item.id" and the text it shows will be "item.text".
- This means the items property must look like this:
let items = [];
items=[...items, {id:1, text:"abc"];
items=[...items,{id:2, text:"abcd"}]
//etc....
References:
The TODO App before render()
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [], text: ''
};
this.handleChange =
this.handleChange.bind(this);
this.handleSubmit =
this.handleSubmit.bind(this);
}
References:
This code:
this.handleChange =
this.handleChange.bind(this);
- Sets up a variable named handleChange for this class.
- It then; tells react, that I want it to bind to 'this' which means 'this' class object. This allows the HTML code to 'see' this variable.
Reference:
The TODO app render code:
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items=
{this.state.items}
/>
<form onSubmit=
{this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange=
{this.handleChange}
value=
{this.state.text}
/>
<button>
Add #
{this.state.items.length + 1}
</button>
</form>
</div>
);}
...
References:
And the Event Handlers:
handleChange(e) {
this.setState(
{text: e.target.value }
);
}
handleSubmit(e) {
e.preventDefault();
if
(this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => (
{items:
state.items.concat(newItem),
text: ''
})
...
References:
Summary:
- The TODO App has two parts
- The list template
- The user interaction
- If you study this application and really get to know what it's doing, your on your way to becoming a React developer.
JWP2021 React Todo App
Top comments (0)