Props Handling (Advanced)
Learn a few tricks about props handling.
We'll cover the following...
Props are passed from parent to child down the component tree. Since we use props to transport information from component A to component B frequently, and sometimes via component C, it is useful to know a few tricks to make this more convenient.
Note: The following refactorings are recommended for you to learn different JavaScript/React patterns, though you can still build complete React applications without them. Consider this advanced React techniques that will make your source code more concise.
React props are a JavaScript object, else we couldn’t access props.list or props.onSearch in React components. Since props is an object, we can apply a couple of JavaScript tricks to it. For instance, accessing its properties:
const user = {firstName: 'Robin',lastName: 'Wieruch',};// without object destructuringconst firstName = user.firstName;const lastName = user.lastName;console.log(firstName + ' ' + lastName);// "Robin Wieruch"// with object destructuringconst { firstName, lastName } = user;console.log(firstName + ' ' + lastName);// "Robin Wieruch"
This JavaScript feature is called object destructuring in JavaScript. If we need to access multiple properties of an object, using one line of code instead of multiple lines is simpler and more elegant. Let’s transfer this knowledge to React ...