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.
- 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:
Happy Reacting and Happy Coding!