My Struggle with State and Props.

After learning JavaScript, I was looking forward to learning React. I was told that React would make everything that I had just learned easier, and I was led to believe that the syntax of React (JSX) was almost identical to JavaScript. When working with a new framework like React you have to accommodate the rules that come with it, including props and state. The introduction of props and state was a big challenge for me.

While the syntax of React is similar to that of JavaScript, there are a few differences. While working with Javascript I only had a brief introduction to the concept of sharing data between components. In React, props (short for properties) are used as a vehicle for sending information between components in a functioning React app.

One reason why you may find state or props confusing is that they look similar but have different uses. Another possible reason for the confusion is because props and state follow an entirely different pattern than other JavaScript frameworks. During your short time reading this article I will try to clear the air of all of the confusion surrounding props and state. With the help of a couple of examples and explanations, my hope is that this article helps someone who may be finding it difficult to fully grasp the idea of state and props.

Props, being the great asset that they are, have some rules that you have to play by like many things in software engineering. The first being that props can only be passed from a parent component to a child component. Much like real-life siblings, sibling props do not like sharing their information so all information must come from their parents.

The most important rule is that props can only be sent from a parent component to a child component:

The above image is an example of creating a class component which is the parent component, that returns a child component with props or a property that has the value of a string “First Child”.

the bottom half is then the child component which in our case is a functional component that takes props as an argument and then returns props inside a <p> tag using dot notation.

Shortly after being introduced to props, everyone should know that the idea of the state is not far behind. The state is a built-in React object that allows components to create and manage their own data. State, like props, has its own set of rules that you must play by if you want to use it. Data cannot be passed using state, state has to be converted into a prop if you want to share that state with another (child) component.

If you would like to play it safe, the state should be established in your most parent component:

In the above image, we have a state being established in a class component titled “Test” using the “this.state” keyword. This component is being given a state with an id of 1 and a name of “test”. Since the state is an object by default state contains key and value pairs.

On lines 25 through 33 we have a state being returned in the same component using dot notation.

The part that I found the most difficult to grasp when learning about using props and state was the fact that they work together.

The process goes something like this:

• The parent component establishes a state

This.state = {

Id: 1,

Name: “testing”}

• Which it can then pass to a child component as a prop using dot notation.

<ChildComponent props={this.state.name} />

• Inside the child component, we now have access to that prop through the state of the parent component.

{this.props.name}

• If/when the state changes in the parent component the prop in the child component will change accordingly.

Once you have the basics of establishing a state and sharing that state through props there is one way that people who already know JavaScript may find it relatively easy, using events. Events in React are used to change the state of a component. Some common events are onClick() and onChange().

Rather than events taking up multiple lines of code an event in React can be shortened down to just one line. When using an event in React to change state the event should call a function that is established in the same component that state is established in since changing state can only happen where the state is established.

The changing of state:

The above image has the state established on lines 11 through 14. One of the state’s key, value pairs has “toys” with a value of an empty array.

On lines 15 through 19 we are changing the state by using the spread operator to add a “newToy” to the array that we currently have stored in the state.

Using the this.setState({}) keyword is the only possible way that your state can be changed.

React is one of today’s most widely used JavaScript libraries that every front-end developer should know. When learning React, it is inevitable that you will encounter the use of “state” and “props” pretty early on in the React journey.

My suggestion to you is that you take your time when beginning to learn React, as the fundamentals will set your base for future learning of React.

Some helpful links:

React props: https://reactjs.org/docs/components-and-props.html

State in React: https://reactjs.org/docs/faq-state.html