I was trying to add search icon from material UI but I am getting this error. "Error: Invalid hook call. Hooks can only be called inside of the body of a function component." I was trying the amazon clone tutorial from YouTube and did everything exactly. Can someone help me? Thank you.
This is my Header.js
import React from "react";
import "./Header.css";
import { Link } from "react-router-dom";
import SearchIcon from '#material-ui/icons/Search';
function Header() {
return (
<nav className="header">
{/* Logo on the left -> img */}
<Link to="/">
<img className="header__logo" src="/logo.png"></img>
</Link>
{/* Search box */}
<input type="text" className="header__serachInput"/>
<SearchIcon />
{/* Links */}
{/* Basket icon with number */}
</nav>
)
}
export default Header
Package.json
{
"name": "amazon-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"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"
]
}
}
Your code looks pretty fine and I don't see the use of hooks in your code here.
Try updating your react-dom module.
See the update error here
Related
I am using CSS module. Does it affect in how to add the Font awesome icon?
I already installed all the required dependencies.
nav.js
import React from "react";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import classes from "./Nav.module.css";
import Button from "../UI/Button/Button";
const Nav = (props) => {
return (
<section className={classes.nav}>
<h1>ReactMeals</h1>
<Button className={classes["nav--btn"]}>
<FontAwesomeIcon icon={["fa-solid", "fa-cart-shopping"]} />
Your Cart
<span className={classes["num__items"]}>0</span>
</Button>
</section>
);
};
export default Nav;
package.json
{
"name": "foodorderapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.2.1",
"#fortawesome/free-regular-svg-icons": "^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",
"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"
},
"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"
]
}
}
Tried to through Font awesome documentation. But it didn't work.
I am having an issue defining env file in react app using the npx create-react-app my-app --template typescript, below are all the needed info on how the structure is shouldn't the env file work right out of the box ? or is this some new issue ? , basically I didn't touch any think after creating the app just put the console log in the app js so I could see the behavour.
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
console.log(process.env);
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>
Edit <code>src/App.tsx</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;
// .env file
REACT_APP_PAYPAL_CLIENT_ID : AWLe2ytIee-lQTYPM_1v1fSnXxiJj-xDgr0xngrbX2vIDNA0zPw_028LsGlLBStEeHhTFzsnLjvqIPij
// Package
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.0",
"#types/node": "^16.11.21",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.3"
},
"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"
]
}
}
From the Adding Development Environment Variables In .env,
The format should be key=value, NOT key: value. Replace : to =
.env:
REACT_APP_PAYPAL_CLIENT_ID=AWLe2ytIee-lQTYPM_1v1fSnXxiJj-xDgr0xngrbX2vIDNA0zPw_028LsGlLBStEeHhTFzsnLjvqIPij
I can't view the photos in my project that I created with create react app. please help me..
<img id="2" src={require('../../../img/logo.png')} className="img-fluid" alt="logo"/>
the file path is absolutely correct.
package.json:
{
"name": "e-ticaret-react-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.0",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"react": "^17.0.2",
"react-bootstrap-icons": "^1.6.1",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"redux": "^4.1.2",
"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"
]
}
}
A photo was displayed in the React project created by Visual Studio. Photos are not displayed in the project I created with create react app in vs code. The file structure is exactly the same. the folder paths are correct.
Try this:
At the top of your file with your imports use this line:
import Logo from '../../../img/logo.png';
And then your img would look like this:
<img id="2" src={ Logo } className="img-fluid" alt="logo"/>
Create a folder calls assets then put on their images inside, like this:
import Logo from '../../assets/logos/logo.png';
<img id="2" src={ Logo } className="img-fluid" alt="logo"/>
I'm a beginner at React app, I just finished setting up the app and want to use material UI for buttons.
Here's my code.
import Button from '#material-ui/core/Button';
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className = "App">
<header className='App-header'>
<Button>Click here</Button>
<img src={logo} className="App-logo" alt="logo" />
</header>
</div>
);
}
export default App;
I run that and it gives me Error: Invalid hook call. Hooks can only be called inside of the body of a function component. and the error points to:
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
> 7 | ReactDOM.render(
8 | <React.StrictMode>
9 | <App />
10 | </React.StrictMode>,
This is my package.json just in case, but I don't think there's anything wrong there.
{
"name": "schedule",
"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"
]
}
}
I've spent so much time trying to fix this, please help
I have reproduced your code in this example
https://codesandbox.io/embed/dreamy-euler-jhu8t?fontsize=14&hidenavigation=1&theme=dark
Need only install material ui with
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
And delete if no need
from './reportWebVitals'
I just needed to do npm install #material-ui/core in the terminal. It wasn't in the dependencies list before. Thanks to #Claire Lin.
I have created the react app using CRA (CREATE-REACT-APP). I have installed node-sass and renamed App.css to App.scss and updated its import in App.js. Now in my App.js, I am just trying to print some text inside a section.
This is the link the repo, I am talking about. For your reference
node -v v12.11.1 and npm -v 6.11.3
App.js
import React from 'react';
import './App.scss';
import Section from 'react-bulma-components/lib/components/section';
function App() {
return (
<Section>
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</Section>
);
}
export default App;
App.scss
#import 'react-bulma-components/src/index.sass';
package.json
{
"name": "just-trying",
"version": "0.1.0",
"private": true,
"dependencies": {
"node-sass": "^4.13.0",
"react": "^16.11.0",
"react-bulma-components": "^3.1.3",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"
},
"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"
]
},
"devDependencies": {
"sass-loader": "^8.0.0"
}
}
Instead of downgrading the version of node, I have uninstalled react-bulma-components and instead just installed bulma via npa like npm i bulma.. and that works fine.