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

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,

React vs ReactDOM

When building web applications in React, you use two packages—react and react-dom. Why is there react and react-dom? What is the difference? The react package holds the react source for components, state, props and all the code that is react. The react-dom package as the name implies is the

Inline Styling with React

Intro If you want to pass style down through props, are building animations, or want some conditional styling in React you will find yourself in need of inline styling. In React, inline styles are not specified as a string. Instead, they are specified with an object whose key is the

Styling in React

Styling in React Now that we have started using React how are we supposed to style all those awesome components that we have been making. There are a couple of ways. 1) Traditional CSS in Header Besides the need to use className instead of class you could just make a