React - Props + State

React uses components that are simple and reusable, to create complex UIs.

I’ve been learning some basics on component hierarchy. Components should be small, containing only a small amount of information.

Props

A key factor to making components reusable are through properties, also known as props for short.

Props are used to pass data from parent to child components. Props shouldn’t be changed from the child component. Props are passed and owned by the parent component. Props tend to be immutable, they should not be changed and are static information.

Props help components be reusable, the parent component provides the data, while the child component is the presentation of the data.

JSBin React Shopping List

This outputs:

State

To add interactions and mutable data to components, this is where State comes into play. A component needs to have mutable data to represent its state.

When state is updated in a component, that component will trigger and update, and the component itself as well as its children components will be re-rendered.

For a component to have an initial state, set the initial state on the class constructor.

JSBin App Demo
Results of App Demo

This sums up Props and State in React. My next blog post will be on where to put your state in your Application.

-D.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.