Copycat project in react section, questions about PropTypes

Web Development Full-Stack
1

Hello everyone,

I am working on the copycat project in the react section. Here is a link to the project:
CopyCat

I completed the PropTypes section of the project, but I am not sure if it’s working properly or not. Here is my CopyCat.js as reference:

import React from 'react';
import {styles} from '../styles.js';
import PropTypes from 'prop-types';

const images = {
  copycat: 'https://content.codecademy.com/courses/React/react_photo_copycat.png',
  quietcat: 'https://content.codecademy.com/courses/React/react_photo_quietcat.png'
};


export default class CopyCat extends React.Component {

  render() {
    const copying = this.props.copying;
    const toggleTape = this.props.toggleTape;
    const input = this.props.input;
    const handleChange = this.props.handleChange;
    const name = this.props.name;

    return (
      <div style = {styles.divStyles}>
        <h1 style = {{marginBottom:80}}>Copy Cat{name ? name:' Tom'}</h1>
        <input type ='text' 
        value = {input} 
        onChange = {handleChange}/>
        <img
          style = {styles.imgStyles} 
          alt='cat'
          src={copying ? images.copycat : images.quietcat}
          onClick={toggleTape}
        />
        <p>{copying ? input: ''}</p> 
      </div>
    );
  };
}
CopyCat.propTypes = {
  copying:PropTypes.bool.isRequired,
  toggleTape:PropTypes.func.isRequired,
  input: PropTypes.string.isRequired,
  handleChange: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired
}

My question is how do I know if the propTypes section is working? From what I recall, I receive some sort of warning message when one of the props doesn’t receive the designated data type ie ‘string’, ‘bool’,‘func’, etc. Would I receive this message in the console?

I opened the console and saw this warning:

Screen Shot 2021-07-15 at 8.12.09 PM
Screen Shot 2021-07-15 at 8.12.09 PM1100×136 31.4 KB

Does that mean there is an error in one of my PropTypes? Any help is appreciated. Happy coding everyone :slight_smile:

2

Bumping this thread because I also want the answer. I tried requiring the wrong prop type (requiring string instead of bool for input) and got no errors except the same one that OP got.

3

Hey
I just had the same problem. After some research I found out that the problem is the Codecademy’s browser. I copied my code locally and it works normally. Maybe it’s an issue with the version of React that it’s being used in the exercise browser.
Try run your codes out of the browser. Maybe it helps :slight_smile: