0
192
VistasReact - PropTypes not Enforcing isRequired
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 :/
1 Respuestas
Responde la pregunta0
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:
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,
};