Validate Props with PropTypes

Props play a huge role in React. 0:00 In the typical React dataflow, 0:02 props are the only way that components can interact with other components. 0:04 We've used props all throughout the project to pass data down to components. 0:08 If a component expects a certain prop, 0:14 what would happen if we forgot to pass the prop to the component? 0:16 In some cases, nothing. 0:19 For example, we're passing the header, a string, via the title prop. 0:21 If we forgot to pass it in, we'd have an empty header. 0:25 The same would happen if we somehow forgot to pass a name or 0:29 a score prop to the player component. 0:32 React doesn't output any errors or warnings, so 0:34 we're left having to figure out why parts of our app are blank. 0:37 We usually pass different types of data, like numbers, strings, arrays, and 0:41 functions as pops to components. 0:46 As your app grows, it's a good practice to type check or validate the data 0:48 a component receives from props, to make sure that it's the right type of data. 0:52 Type checking can help you catch a lot of bugs during development. 0:57 There are three popular ways to handle type checking in React, Prop Types, 1:00 TypeScript, and Flow. 1:05 You can read about TypeScript and Flow in the teacher's notes. 1:07 In this video, I'll teach you how to validate props with the PropTypes library. 1:10 PropTypes used to be built into React. 1:14 It was moved into a separate package, because type checking is optional, and 1:17 to give developers the option of using other tools and approaches. 1:21 To begin using PropTypes in our app, we need to install and 1:25 import the PropTypes library. 1:28 Open up your terminal or console. 1:31 Stop running the development server by pressing Ctrl+C, 1:33 and run npm install --save prop-types. 1:39 Once it's installed, run npm start to start up the development server. 1:45 Let's start by validating the counter components props. 1:50 In the file, Counter.js, I'll first need to import PropTypes 1:54 at the top with import PropTypes from 'prop-types';. 1:59 To run type checking on the props for a component, 2:04 you assign it the PropTypes property. 2:07 To use prop types on a function component like Counter, write Counter.propTypes, 2:10 right below the function, and set it equal to an object. 2:16 The propTypes object contains the props being passed to the component as its keys. 2:20 The Counter component accepts three props, index, score, and changeScore. 2:26 So inside object, add the properties index, 2:31 score, and changeScore. 2:36 PropTypes come with a range of validators you can use to make sure that the data 2:39 coming in from props is valid. 2:43 For example, to check that the index and score props are a number type, 2:45 write PropTypes.number as the value. 2:50 And to declare that the changeScore prop is a function type, write PropTypes.func. 2:56 The React docs has a list of all the type validators you can use with helpful 3:04 examples. 3:08 You'll find the link to this page in the teachers notes with this video. 3:09 For example, you use PropTypes.bool to validate booleans, 3:12 PropTypes.strings for strings, .object for objects, and so on. 3:16 PropTypes provide helpful warnings at runtime if the type other prop 3:21 is different from the one defined in the PropTypes object. 3:25 For example, if I accidentally pass Counter a score prop that's 3:29 a string instead of a number, in the console, we see the message. 3:33 Warning: Failed prop type: Invalid prop 'score' of type 'string' supplied to 3:38 'Counter', expected 'number'., so that's really helpful. 3:42 All right, let's validate the header component's props next. 3:46 In Header.js, let's import prop types. 3:50 I like to import any libraries above the component imports. 3:53 So right below the react import at import PropTypes from 'prop-types'. 3:57 Next, below the function, create the propTypes object with Header.propTypes. 4:05 The title prop the header accepts should be a string. 4:16 So let's write title, and set it to PropTypes.string. 4:20 And the players prop is an array containing all the player objects in 4:25 state. 4:30 We could simply validate that it's an array with PropTypes.array, but 4:30 arrays can contain numbers, strings, booleans, and in our case, objects. 4:35 So to make sure that the array is an array of objects, we can use the arrayOf 4:40 methods on PropTypes and pass it PropTypes.object. 4:45 Next, the stats component receives the players array via props, and 4:50 with that data, we determine the total players and total points. 4:55 So in Stats.js, let's first import PropTypes at the top, 4:58 and define our PropTypes below the function with 5:04 Stats.propTypes, and set it equal to an object. 5:09 Just like in the header component, 5:16 we should validate that the players prop is an array of objects 5:19 using PropTypes.arrayOf and passing it PropTypes.object. 5:25 But we can even be more specific by specifying the properties of 5:31 the object with the shape method. 5:35 I'll replace object with shape, which takes an object. 5:38 And the most important property to validate here in the Stats component is 5:43 the score prop, which we use to determine the total points. 5:47 To check that the scope prop is a number type, write PropTypes.number. 5:51 Again, this is not required, 5:56 but I do recommend taking the time to write detailed PropTypes like this. 5:58 Because if you somehow pass bad data to a component, React will warn you about it, 6:02 which makes for much easier debugging. 6:07 And for performance reasons, PropTypes is only checked in development mode. 6:10