Why isn't the Error printing to the console? Testing prop types in React [SOLVED]

Why isn't the Error printing to the console? Testing prop types in React [SOLVED]
0

#1

EDIT: Solved! I was using the production CDN for react, but I needed the development CDN. Here it is: https://unpkg.com/react@16.2.0/umd/react.development.js

I’m learning to test prop types in React and this Error should print to the console. Why isn’t it working?

It works in this tutorial around the 00:54 mark.

Here’s the code:

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">
function SayHello(props) {
  return (
    <div>
      Hello {props.firstName} {props.lastName}!
    </div>
  )
}
SayHello.propTypes = {
  firstName(props, propName, componentName) {
    if (typeof props[propName] !== 'string') {
      console.log('does it work?')
      return new Error(
        `Hey, you should pass a string for ${propName} in ${componentName} but you passed a ${typeof props[propName]}!`
      )
    }
  },
}
ReactDOM.render(
  <SayHello firstName={true} />,
  document.getElementById('root')
)
</script>

#3

Hi, I copied your code into my text editor and I did get this message “index.js:2177 Warning: Failed prop type: Hey, you should pass a string for firstName in SayHello but you passed a boolean!” so I don’t think there’s anything wrong with your code.


#4

That’s good to hear, I wonder what’s wrong on my end… I tried Codepen as well but I still don’t see the error.