I have a node project, very simple, in which I have one page, one component, and one index.js. I have two props: text, and num. I am trying to use PropTypes to give a warning if they are not the correct type, or if they do not exist when I do .isRequired. However, they are not throwing any errors. Is this an issue with my code of PropTypes? I am using React 16.2.0, and prop-types 15.6.0. I used create-react-app to create my app.
Here is the code.
App.js:
import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component{
render() {
let text = this.props.text
let num = this.props.num
return <h1>{text}{num}</h1>
}
}
App.propTypes = {
text: PropTypes.string.isRequired,
num: PropTypes.number
};
export default App
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App num="hey"/>,
document.getElementById('root')
);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
As you can see, not only is num the wrong type, (string instead of number) but also, text does not exist, and it is marked as .isRequired.
My server continues to run and display "hey" and throw no warnings. What am I missing here?????
I have a node project, very simple, in which I have one page, one component, and one index.js. I have two props: text, and num. I am trying to use PropTypes to give a warning if they are not the correct type, or if they do not exist when I do .isRequired. However, they are not throwing any errors. Is this an issue with my code of PropTypes? I am using React 16.2.0, and prop-types 15.6.0. I used create-react-app to create my app.
Here is the code.
App.js:
import React from 'react';
import PropTypes from 'prop-types';
class App extends React.Component{
render() {
let text = this.props.text
let num = this.props.num
return <h1>{text}{num}</h1>
}
}
App.propTypes = {
text: PropTypes.string.isRequired,
num: PropTypes.number
};
export default App
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App num="hey"/>,
document.getElementById('root')
);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
As you can see, not only is num the wrong type, (string instead of number) but also, text does not exist, and it is marked as .isRequired.
My server continues to run and display "hey" and throw no warnings. What am I missing here?????
Share Improve this question asked Feb 11, 2018 at 2:52 DanDan 4373 silver badges13 bronze badges 9 | Show 4 more comments1 Answer
Reset to default 20The errors will not be printed in your terminal but in your browser console. And check the consol level, you might be in "warning" or something else.
my-appdirectory. I don't see an error at all. – Dan Commented Feb 11, 2018 at 3:01