React Todo App
Tags: react
Published: 2021-02-10 13:42:39

Continuation...

The [React](https://reactjs.org/) 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. 

```javascript
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:
```javascript
 {
   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.

```javascript
<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:
```javascript
let items = [];
items=[...items, {id:1, text:"abc"];
items=[...items,{id:2, text:"abcd"}]

//etc....
```
References:
- [Javascript Arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
- [Array of Objects](https://devblog.axway.com/mobile-apps/beginners-javascript-objects-and-arrays-2/)
- [Spread Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

**The TODO App before render()**

```javascript
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:
- [The Javascript Constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor)

- [Javascript keyword Extends](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/extends)
- [Javascript function Super()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super)
- [Javascript keyword this.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

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:
- [Javascript bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)


The TODO app render code:
```javascript
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:
- [The HTML form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)

- [onSubmit event](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit)

- [input onChange event](https://developer.mozilla.org/en-US/docs/Web/API/PresentationAvailability/onchange)

- [The value attribute](https://developer.mozilla.org/en-US/docs/Web/API/BluetoothRemoteGATTDescriptor/value)

And the Event Handlers:

```javascript
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: 
- [JavaScript Event Handers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers)
- [PreventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
- [React setState](https://css-tricks.com/understanding-react-setstate/)

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