React - PropTypes not Enforcing isRequired - javascript

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 :/

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,
};

Related

application cannot be run on localhost or with github page

Can I ask for help? Initially, the application that I built using React JS could run on localhost. However, when I try to deploy using GitHub pages, the application cannot be run even though the React code has been deployed to GitHub.
This is the json package that I set to deploy with GitHub pages
{
"name": "movie-app",
"version": "0.1.0",
"homepage": "http://xcage88.github.io/movie-app",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-solid-svg-icons": "^6.2.1",
"#fortawesome/react-fontawesome": "^0.2.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.3",
"gh-pages": "^5.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"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"
]
},
"devDependencies": {
"react-router-dom": "^6.8.0"
}
}
this is code index and app.js
App.js :
import { Route, Routes } from 'react-router-dom';
import SignUp from './component/SignUp';
import ForgotForm from './component/ForgotForm';
import LoginForm from './component/LoginForm';
import MainPage from './component/MainPage';
function App() {
return (
<div>
<div>
<Routes>
<Route path='/' exact element={<LoginForm/>}/>
<Route path='/forgot' element={<ForgotForm/>}/>
<Route path='/sign-up' element={<SignUp/>}/>
<Route path='/main/*' element={<MainPage/>}/>
</Routes>
</div>
</div>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './style/style.css'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle'
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
when I try to run it, the result is like this:
run in GitHub pages
run in localhost
if you want to try it, click or copy/paste the link below
react app
I can't exactly tell you why you are getting the error from the first screenshot. It seems like it is some Google-Thingy.
I found this related question and it seems like you have to set a flag to ignore or disable this "feature". As I looked further into the topic, in your case it's more about enabling the feature instead of disabling.
Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'
Maybe you find more when you search for "floc google".
For your localhost problem, it seems like the path is just / instead of /movie-app.

React-bootstrap components breake my whole page

I'm developing a React frontend with react-bootstrap. React is working fine, but when I use any react-bootstrap component in any page, Chrome just shows a fully blank page.
I think the problem might be in the index.html. I have this in the <head> tag, but no alert showing, I'm not sure if it should.
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"></script>
<script>var Alert = ReactBootstrap.Alert;</script>
Anyway, here's all the other code I consider relevant:
This is my index.js:
import React from 'react';
import {createRoot} from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
This is my App.js working fine, Chrome shows the text:
import React from 'react';
export default function App() {
return (
<div className="App">
<p>This is some text.</p>
</div>
);
}
This is my App.js not working. It doesn't give any error, just a completely blank page, not even the text shows.
import React from 'react';
import { Button } from 'react-bootstrap';
export default function App() {
return (
<div className="App">
<p>This is some text.</p>
<Button variant="primary" type="button" value="Input" />
</div>
);
}
This happens with any bootstrap component, not only the Button (I've tried a few). I'm new to React, so any kind of help is welcome.
EDIT: Here's a screenshot of the Chrome console when the blank page problem happens.
EDIT 2: Here's my package.json:
{
"name": "asignacionesfrontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"http-proxy-middleware": "^2.0.4",
"jest-editor-support": "^30.0.2",
"react": "^18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"sass": "^1.50.0",
"sweetalert": "^2.1.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "set HTTPS=true&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prestart": "node aspnetcore-https && node aspnetcore-react"
},
"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"
]
}
}
It seems like you have set up your react-bootstrap & bootstrap not properly. When using react-bootstrap, you don't need the js-bundle from bootstrap, but the css. You have two options:
Install bootstrap (npm i bootstrap) and add import 'bootstrap/dist/css/bootstrap.min.css'; to your index.js or App.js file
Or use CDN: Paste following snippet into your index.html:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
https://react-bootstrap.netlify.app/getting-started/introduction/#stylesheets
I solved it. I needed to actually install all the packages with npm in my project folder. I had them installed in my Windows user folder and globally, but not in my project.
Basically, just open a cmd in your project folder and run:
C:\SomePath\MyReactProject>npm install react-bootstrap bootstrap
Try this
<Button href="#" variant="primary" type="button" value="Input" />

Weird problem in react: (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'

I'm currently working on a MERNG app, and i was doing the setup in the fronted, and, when i ran npm run start, this error suddenly appeared
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Compiling...
i've searched for this problem, and i found that, you should delete node_modules, then run npm intall, i tried, didn't work
This is my package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/client": "^3.3.14",
"#testing-library/jest-dom": "^5.11.10",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"apollo-link-context": "^1.0.20",
"framer-motion": "^4.1.3",
"moment": "^2.29.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-file-base64": "^1.0.3",
"react-redux": "^7.2.3",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"redux": "^4.0.5",
"styled-components": "^5.2.3",
"styled-icons": "^10.33.0",
"web-vitals": "^1.1.1"
},
"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"
]
}
}
This is my index, i put there my apolloProvider and my redux setup
import React from "react";
import ReactDOM from "react-dom";
import ApolloProvider from "./ApolloProvider";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { reducer } from "./reducer";
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>{ApolloProvider}</Provider>,
document.getElementById("root")
);
This is my apollo provider
import React from "react";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
createHttpLink
} from "#apollo/client";
import App from "./App";
const httpLink = new createHttpLink({
uri: "http://localhost:5000"
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
});
export default (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
);
What is going on with my react app? i'm mad at this because it came out of nowhere, any clue how to fix this? And thank your four time comunnity !

React.JS: Error: Invalid hook call. Hooks can only be called inside of the body of a function component

I have been working on a front-end (following a tutorial) for React.js and have ran into an error:
× Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
I have looked into each one of these issues and cannot seem to find the problem.. If anyone has a pointer that would be very helpful..
The 'App' Code:
import React from "react";
import { Container, AppBar, Typography, Grow, Grid } from "#material-ui/core";
import memories from "./images/memories.png";
const App = () => {
return (
<Container maxwidth="lg">
<AppBar position="static" color="inherit">
<Typography variant="h2" align="center">
Memories
</Typography>
<img src={memories} alt="memories" height="60" />
</AppBar>
</Container>
);
};
export default App;
The 'Package.json' Code:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.1"
},
"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"
]
}
}
The 'index.js' Code:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
EDIT: as requested, i've added a few more files which maybe causing the issue.

React-router-dom and history doesn't work

I'm trying to import react-router-dom and history for work with React-router but doesn't work and I get this error.
I imported this packages:
yarn add react-router-dom
yarn add history
I'm working under v14.4.0 version of node.
This is my code:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const history = createHistory();
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById('root')
);
serviceWorker.unregister();
package.json (for check a lot of versions xd):
{
"name": "react-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"history": "^5.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
```
If you need additional information for help me to solve the problem, don't doubt it for ask for.
Thanks a lot!!
Try importing it like this:
import { createBrowserHistory } from "history";
const history = createBrowserHistory();

Categories