React - PropTypes not Enforcing isRequired

user_17215197 0
Viewed 239

I'm creating a component which takes in two props. The first is a list of strings e.g. ['string1', 'string2'] and the second is a list of list of strings e.g. [['string1arr1' ,'string2arr1'], ['string3arr2', 'string4arr2']].

The is roughly what my component looks like:

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

export default function ComponentName (props){
    //insert component code here
}

ComponentName.propTypes = {
    one: PropTypes.arrayOf(PropTypes.string).isRequired,
    two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
}

When I pass through a prop with a different datatype, e.g.

<ComponentName one={123} two={'abc'} />

No PropTypes error occurs and the component executes as normal.

I've been going through several different tutorials trying to see what it is I've done wrong and from what I can see I'm using poropTypes correctly. I've also tried using simpler requirements such as one: PropTypes.string.isRequired and it still didn't work.

Version of react and prop-types installed:

"react": "^17.0.2",
"prop-types": "^15.8.1"

Babel Dependencies:

"@babel/core": "^7.16.7",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/preset-env": "^7.16.7",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.3",

It now works and I'm not sure what I did to fix it :/

reactjs javascript
1 Answers

It looks right. However I am not sure if your example above is the same semantics you are using in your code. You can't declare export default ComponentName (props), ComponentName is unknown, neither a function or a class. Try something like this instead and maybe it'll solve your problem:

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

function ComponentName (props){
    //insert component code here
}

ComponentName.propTypes = {
    one: PropTypes.arrayOf(PropTypes.string).isRequired,
    two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
}

export default ComponentName;

Edit:

Your code works here for me:

enter image description here

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

App.js

import logo from "./logo.svg";
import "./App.css";
import ComponentName from "./ComponentName";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ComponentName one={["123"]} two={[["923939"]]} />

        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

ComponentName.js

import React from "react";
import PropTypes from "prop-types";

export default function ComponentName() {
  return <div>ComponentName</div>;
}

ComponentName.propTypes = {
  one: PropTypes.arrayOf(PropTypes.string).isRequired,
  two: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)).isRequired,
};
user_25507660
Related