React: Props & State

React is a widely used library in JavaScript. When learning React, you will need to learn about props and state. Learning these will help you take your first steps towards learning and understand React. So what exactly is Props? Props is short for properties and they are used to pass data between React Components. Usually props are passed from the Parent Component down to the Child Component. An example of passing data using props is :

First we define some data from the parent component and assign it to the child component using the “props” attribute. “Name” is the defined prop, and we can then pass it to a function like if we are giving it an argument. The prop can be called anything we like, but be sure to call it something logical for the project you are working on. For example this would work but it would be a bit confusing if you are doing a Christmas based project.

After passing it through to the child component we can call it using the dot notation to render it to the page. In this case we are using a “p” tag with the passed in prop.

React has another built in object called State. State allows components to create and update their own data. Components cannot pass data with State, but they can manage it from within. Here is an example of how state is used.

You usually want to set your initial State and to update it you don’t want to update state directly, instead you want to use another method called setState().

A change in state happens when an event is triggered. Whether it is on a new form, or update method. The setState() method will look at the initial state being passed and it will update it with the new or updated state. When the setState() method is triggered, it re-renders the DOM but it will only re-render the component with the updated state.