1. 7
    Validate Component Input with Prop Types in React
    5m 11s

Validate Component Input with Prop Types in React

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

React gives us a mechanism called PropTypes to ensure that the property values passed into components are of the correct type. By ensuring the correct data is passed to our components, we can avoid potential bugs and more confidently share components with a team or as open source libraries.

Adam
Adam
~ 4 years ago

Just to follow up, this shows up as a javascript error and could cause confusion and will eventually not work.

jpbamberg1993
jpbamberg1993
~ 4 years ago

npm run start

bam@Johns-MacBook-Pro:~/.npm/_logs

0 info it worked if it ends with ok 1 verbose cli [ '/Users/bam/.nvm/versions/node/v7.0.0/bin/node', 1 verbose cli '/Users/bam/.nvm/versions/node/v7.0.0/bin/npm', 1 verbose cli 'run', 1 verbose cli 'start' ] 2 info using npm@5.0.4 3 info using node@v7.0.0 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info lifecycle todo_react@0.1.0~prestart: todo_react@0.1.0 6 silly lifecycle todo_react@0.1.0~prestart: no script for prestart, continuing 7 info lifecycle todo_react@0.1.0~start: todo_react@0.1.0 8 verbose lifecycle todo_react@0.1.0~start: unsafe-perm in lifecycle true 9 verbose lifecycle todo_react@0.1.0~start: PATH: /Users/bam/.nvm/versions/node/v7.0.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/bam/Documents/practice_work/todo_react/node_modules/.bin:/Users/bam/.rbenv/shims:/Users/bam/.rbenv/bin:/Users/bam/.nvm/versions/node/v7.0.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/share/dotnet:/usr/local/git/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/bam/.fzf/bin 10 verbose lifecycle todo_react@0.1.0~start: CWD: /Users/bam/Documents/practice_work/todo_react 11 silly lifecycle todo_react@0.1.0~start: Args: [ '-c', 'react-scripts start' ] 12 info lifecycle todo_react@0.1.0~start: Failed to exec start script 13 verbose stack Error: todo_react@0.1.0 start: react-scripts start 13 verbose stack spawn ENOENT 13 verbose stack at ChildProcess.<anonymous> (/Users/bam/.nvm/versions/node/v7.0.0/lib/node_modules/npm/lib/utils/spawn.js:33:16) 13 verbose stack at emitTwo (events.js:106:13) 13 verbose stack at ChildProcess.emit (events.js:191:7) 13 verbose stack at maybeClose (internal/child_process.js:877:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) 14 verbose pkgid todo_react@0.1.0 15 verbose cwd /Users/bam/Documents/practice_work/todo_react 16 verbose Darwin 16.6.0 17 verbose argv "/Users/bam/.nvm/versions/node/v7.0.0/bin/node" "/Users/bam/.nvm/versions/node/v7.0.0/bin/npm" "run" "start" 18 verbose node v7.0.0 19 verbose npm v5.0.4 20 error file sh 21 error code ELIFECYCLE 22 error errno ENOENT 23 error syscall spawn 24 error todo_react@0.1.0 start: react-scripts start 24 error spawn ENOENT 25 error Failed at the todo_react@0.1.0 start script. 25 error This is probably not a problem with npm. There is likely additional logging output above. 26 verbose exit [ 1, true ]

jpbamberg1993
jpbamberg1993
~ 4 years ago

I just had to install react-scripts...

Maria
Maria
~ 4 years ago

If anyone is interested, this is how I dealt with PropTypes (I did use prop-types package), but I also kept the stateless functional components. In addition, I am NOT using create-react-app: https://github.com/interglobalmedia/react-todo-app/commit/ab3053135cd490bb745c3c346ffd1df850369d73?diff=unified

supernarwen
supernarwen
~ 3 years ago

Why is PropTypes depreacted? Is it cause of performance issues or what?

Juan Marco
Juan Marco
~ 3 years ago

If you're using React 15.5.0 or higher, then you have to to import PropTypes first. Like this:

import React from 'react'
import PropTypes from 'prop-types'

export const TodoForm = (props) => (
  {/*code goes here.. */}
)

TodoForm.propTypes = {
  currentTodo:  PropTypes.string
}

Learn more about this here

Michael
Michael
~ a year ago

Coming from years of Angular.... and.. honestly I am blown away by React. React enforces best practices such as presentational components naturally, and the code is just so much easier to work with. Angular's @input() / @output bindings are a huge mess compared to stateless functional components.