Crackdown On React Part 1
What Will We Cover
- State and setState
- Components via Props
- Mapping
- Lists and Keys
- Importance of Classes in React
State and setState
State is a object initialization that goes inside the constructor and can only work for classes. The below image shows a good example of where to put this.state.
State is only local to the class its defined in. What’s nice about state that can’t be done with props is that it allows the developer to change the variable value. The “this.setState” modifies the state object and then the component responds to that by re-rendering the change. This means that the display would change. So if you want to pull a value currently on the screen, the this.state will represent what’s being displayed on the current screen or the technical term, rendered. State is an object, so pulling values from it will only work using object dot notation. State only works in classes and will not work in functions because functions cant hold constructors.
Why use state
State is used for making a class dynamic as well be able to render a value in the constructor. State allows React to change all of the values without going into the DOM and change every single value. This is very similar to props except that it is only managed by the component it is in. After the state is defined in the constructor, it acts a lot like a normal object. To answer the overall question. We use state to make react change whenever a setState is changing a value.
Lists and Keys
Keys are vital to components since it gives each item in an object a unique value. A key can be anything as long as its unique to only that property. One of the best ways to make a unique key is setting an id number to each key-value pair. We would use keys when mapping through an array of items and printing them to the XML. Nothing will be rendered without the key. In the below example we use mapping correctly but without any keys.
We would get an error message like this
To fix this we can do this
In conclusion, it’s important to use keys when using the function map to render values from an array or and list. Map is one function that can pull values from a list in React.
Components via Props
Components help the developer completely split the interface in any way they want to. Props are short for properties and they are suited well for functions for the user to pull something to render and only be able to read the value. What’s nice about components is their ability to refer to other components outside their own class. This would look like this in the below code.
The word “Welcome” is a different component from App. We do not know if it would be a class or function from this picture. Use components like this helps code stay DRY and makes use of Reacts fluid flow for changes. Class components are best for react since they contain logic, manage state, and can hold functions of other components.
In Part 2 we will discuss the following items and the importance of them in React. We will also touch a little on Next.js which is a newer verizon of React.
- Rendering and Returns
- Dynamic and Conditional Rendering and Elements
- Implementing JSX
- Life Cycle Methods
