Warning: PropTypes validators
See original GitHub issueHello,
I tried your react component and it work really well. However using it generates a warning in the console:
warning.js:36 Warning: Failed prop type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types
in ReactImageLightbox (at App.js:43)
in App (at index.js:7)
I’m new to react to perhaps I am missing something. I created my application using create-react-app and it uses react V15.4.2. Should I upgrade to react 15.5 ?
Thanks
The following code reproduces the issue:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Lightbox from 'react-image-lightbox';
class App extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
photoIndex: 0
};
}
render() {
const {isOpen, photoIndex} = this.state;
const images = [
'//placekitten.com/1500/500',
'//placekitten.com/4000/3000',
'//placekitten.com/800/1200',
'//placekitten.com/1500/1500'
];
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<button onClick={() => this.setState({ isOpen: true })}>Open lightbox</button>
{isOpen &&
<Lightbox
mainSrc={images[photoIndex]}
nextSrc={images[(photoIndex + 1) % images.length]}
prevSrc={images[(photoIndex + images.length - 1) % images.length]}
onCloseRequest={() => this.setState({ isOpen: false })}
onMovePrevRequest={() => this.setState({
photoIndex: (photoIndex + images.length - 1) % images.length,
})}
onMoveNextRequest={() => this.setState({
photoIndex: (photoIndex + 1) % images.length,
})}
/>
}
</div>
);
}
}
export default App;
Related package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-image-lightbox": "^3.4.3",
"sinon": "^2.1.0"
},
"devDependencies": {
"react-scripts": "0.9.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:1
- Comments:8 (1 by maintainers)
Top Results From Across the Web
Don't Call PropTypes Warning - React
In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any...
Read more >PropTypes validators directly is not supported from `TreeView ...
I'm getting this PropTypes validators directly is not supported warning for these components TreeView , ObjectInspector , ConnectedTreeNode ...
Read more >Calling PropTypes validators directly is not supported by the ...
Warning : Failed propType: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.
Read more >How to validate React props using PropTypes - LogRocket Blog
Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.
Read more >Calling PropTypes validators directly is not supported" when ...
2. Build and run Firefox. 3. Open the DevTools Panel. 4. Select the Memory tab. 5. open the Browser Console. This warning appears...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Not sure if down grade is the right thing to do to fix the issue, but it works. Thanks @sopheakreth .
change version to “react-image-lightbox”: “3.4.1”