Use PropTypes to Define the Props You Expect no result using CRA

Use PropTypes to Define the Props You Expect no result using CRA
0

#1

Tell us what’s happening:
using create-react-app why does this code show no error ??? i specified the type as an array yet i inputed a string !

import React, { Component} from 'react';

import './App.css';

import {PropTypes} from 'prop-types';

const AnotherOne=(props)=> <h5>{props.ehm}</h5>;

AnotherOne.propTypes={ehm:PropTypes.array.isRequired}

class App extends Component {
  render() {
    return (    <AnotherOne ehm="ss"/> )}}

Your code so far


const Items = (props) => {
  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
};

// change code below this line

// change code above this line

Items.defaultProps = {
  quantity: 0
};

class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <Items />
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-proptypes-to-define-the-props-you-expect


#3

using create-react-app why does this code show no error ??? i specified the type as an array yet i inputed a string !

import React, { Component} from 'react';

import './App.css';

import {PropTypes} from 'prop-types';

const AnotherOne=(props)=> <h5>{props.ehm}</h5>;

AnotherOne.propTypes={ehm:PropTypes.array.isRequired}

class App extends Component {
  render() {
    return (    <AnotherOne ehm="ss"/> )}}

#4

On the React Docs for PropTypes, I noticed this sentence:

For performance reasons, propTypes is only checked in development mode.

Are you running create-react-app in dev mode, or production?


#5

i honestly don’t know…can u tell me how i can figure out which i’m using ?


#6

I’m learning myself. I don’t know. I use VSCode, and it defaults to development mode.


#7

then i guess i’m the same …so what seems to be the problem ?


#8

As far as I can tell, your code isn’t the problem. I went facebook’s github page where React lives, and this is what I found:

npm start or yarn start
Runs the app in development mode.

Is that how you build your project?


#9

cd PROJECT NAME
npm start
that’s how i open my CRA projects so i’m now certain that i’m using VS in dev mode


#10

Unfortunately, I’m out of ideas until I test your code a little more. Might be an hour until I reach a good stopping point.


#11

does the website still says that it will remove my post in 24 hrs ?


#12

No, I believe that refers to my first reply, where I was referencing the FCC page on PropTypes being imported from react. But on the React Docs, it says that since 15.5, it’s now imported from proptypes like you did.

EDIT: I deleted it because it was wrong.


#13

Just throwing a dart into the dark here, but doesn’t proptypes import without the curly braces?

I’m not certain if that effects it but every thing I’ve seen with them is:

import PropTypes from 'prop-types';

as opposed to

import {PropTypes} from 'prop-types';

Is it possible your above isn’t actually implementing PropTypes because of this? Or did I miss something with the curly braces?

Edit: your statement is trying to grab PropTypes from prop-types instead of grabbing everything, so I wonder if there is an issue because of that.


#14

I think you you are correct, Jordan. According to the React docs on proptypes (link above), the syntax is:

import PropTypes from 'prop-types';

As Jordan pointed out, the way @Scorpio wrote it uses destructuring assignment to effectively say (using let instead of import):

let { PropTypes: PropTypes } = /*the object containing all the exports*/ from  'prop-types';

instead of the correct syntax, which says:

let PropTypes = /*the default export*/ from 'prop-types';

Have you tried this, @Scorpio?

The first syntax is covered in ES6: Understand the Differences Between import and require, and the second in ES6: Import a Default Export.

Syntax errors make me want to shoot myself in the face, so please let me know if this fixes the problem, Scorpio.


#15

Hey Scorpio and @JordanMarsh,

so I hit that stopping point where I can start a new thing. I made a project in vscode to test the code. It works, even with your original syntax. TL;DR: Did you check the browser console? That’s where I saw the error.

My procedure:

create-react-app proptest //make the node/react project
cd proptest //move into the root dir for the project
code . //start VSCode using the current (project) dir as the workspace
npm start // start the development server, accessible at localhost:3000

I then copy/pasted your code to ./App.js
The webpage updated with this (webpage with <h5> at left, console at right):


#16

first,i must appologize for replying so late but i was really really super busy
second, what i normally do bro is this when i open a cra project:
cd projectName
npm start
ofcourse in your comment u created it from scratch but anyway the only difference i can see is "code . " is that what makes it work ?


#17

i tried removing the {} …nothin changed bro


#18

No, I mean: where are you looking for the errors. I mentioned my process to show that I was doing nothing special. Can you run your app and show us a screenshot of your console like I did?


#19

Nice bro,well done …i thought it would show me an error on the webpage like it does normally if there is something wrong with my syntax .Note:class throws an error but it is perfectly correct.you can check another post for me regarding that


#20

The first error is what @vipatron is talking about

This is second error is relates to what I was talking to you about. PropTypes hasn’t been really updated for quite a long time (and i suspect will die completely pretty soon) — I don’t think it’s going to recognise bleeding-edge stuff around allowing class rather than className as valid edit not PropTypes error, just warning as expected, I’m not massively familiar with how bleeding-edge React is dealing with class vs. className attributes - I think it should Just Work, but that you always get those warnings

edit edit aha yeah class works perfectly, but you just get nasty warnings in the console.


#21

To ping off of what @DanCouper said: The error says (I think) that you assigned a class attribute to some html elements that look like this:

<div>
  <h1 class="xyz">
  </h1>
</div> 

But since that structure doesn’t appear anywhere in the code you shared with us, I can’t be 100% certain. I didn’t get that error because I didn’t run that code. As for whether your css classes are being applied correctly, I can’t say for sure, but I’m pretty sure they won’t be.