Index is an anti-pattern

The problem When mapping over data in React you sometimes see developers do that following: {this.props.todos.map((todo, index) => (

{todo}

)} At first glance, this may seem to work correctly. But if we have logic to remove an item you will notice a bug. No matter what element you

Mapping Components in React

We've already covered the hardcoding of components in React, when you already know exactly what you want to show up on the screen. However, React isn't intended to be used simply for hardcoded data. Its whole purpose is to react to new information and user input and pass data to

Components In React

What is a component? A component is a part or element of a larger whole. In React a component is just that, a part of a website. Examples of this include Navbar, Header, Footer, in fact, we could think of a website as being completely made of components. In React,

Forms in React

Controlled Components We want the value of our input boxes to always be current with state. We do that with adding the event handler "onChange" to our inputs and then handling that change by updating state. class NameForm extends React.Component { //here is a pretty standard constructor constructor(props) { super(

Mongoose References

Tables In your Mongoose Schemas, you will have objects that have specified properties. These properties can reference other objects in other Schemas. This tutorial will explore some of the methods to doing this. One user has multiple todos If you are a user with todos, your todo schema will look