In another attempt to teach myself something I don’t quite fully understand yet — I will let you all be the guinea pig as I learn and blog about props in React… Lucky y’all!!!! This week at Flatiron Bootcamp, we started learning React, I was initially excited because I have some knowledge of React but that excitement immediately turned into panic when I realized I just was not grasping the concept of props and all that they entailed.
As per usual, let’s start at the beginning … According to the documentation, React is a Javascript library for building user interfaces. When using this library, developers can create interactive UI’s, organize code into reusable components and much more! In React there are two different ways to define Components: Functional and Class.
Functional Components at the core are a function but unlike Javascript functions, these functional components return a React element (JSX) and the function name always starts with a capital letter. Below is an example:
- In earlier versions of React, it was not possible to use state inside functional components but since the introduction of React Hooks, all that has changed.
Next, class components which are defined with the class keyword and ‘extend’ a React component. Class components can also take props and again return JSX but also have an additional render() method. Below is an example:
Most importantly, is how components communicate with each other, which is where props come in! In React, props (or properties) are a special object which is how we send data from one component to another component. Props can only pass data from the parent component to child component (or to components at the same level). Props also make components more dynamic. Now I understand this is a lot in one sitting but we can think of props similar to arguments and without passing these props, an error will be thrown (well, most likely the props value will be undefined).
Since props, are a special object they can be accessed just like an object would or we can use E6S destructuring. If you have a ton of props, you want to pass down to a component, you can include them on the entire props object and access them by: props.propName. But if you only have a few props being passed down, it is completely okay to immediately destructure them! Below is an example:
In these two code examples, to implement props we have to do something different between a class and functional component. In class components, we have to use the this keyword when passing props. In React, when we define classes we use methods inside those classes to refer to attributes such as state and props. For our methods to have access to this.state or this.props, we have to bind the React component ‘this’ context to those methods. Binding this enables us to access props and state for the component. As we know from ES6 Javascript, arrow functions implicitly bind to the function so we don’t need to specify that anywhere else.
Another great thing about props is that we can pass anything into a prop. You can pass any type of data available in Javascript such as Boolean, number, or array into props. But what happens if you forget to pass a prop to an instance of a component or we know a particular prop has not value. We can fix all these what ifs with default prop values! Below is an example:
Happy Reacting and Happy Coding!
