Develop Reference

How to fix React invalid hook call?

I just started leanring REACT and am following this youtube tutorial. I copied some code for an Appbar from material-ui's website but I'm getting these errors and I'm not sure how to fix them (I basically followed the youtube video exactly, and the guy in the video didn't get any errors).
This is my App.js file:
import './App.css';
import AppBar from './AppBar';
function App() {
return (
<div className="App">
<AppBar/>
</div>
);
}
export default App;
And this is my AppBar.js:
import * as React from 'react';
import AppBar from '#mui/material/AppBar';
import Box from '#mui/material/Box';
import Toolbar from '#mui/material/Toolbar';
import Typography from '#mui/material/Typography';
import Button from '#mui/material/Button';
import IconButton from '#mui/material/IconButton';
import MenuIcon from '#mui/icons-material/Menu';
export default function ButtonAppBar() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
);
}
And these are the errors from chrome (the code does compile in vs code tho).
Does anyone know why this is happening and how to fix it? Thank you!

react-speech-recognition for text-field

Im trying to make react-speech-recognition write inside a text-field but for some reason it wont work. I think it has to do with the last line.
import React from 'react';
import Button from '#material-ui/core/Button';
import Checkbox from '#material-ui/core/Checkbox';
import CircularProgress from '#material-ui/core/CircularProgress';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import Paper from '#material-ui/core/Paper';
import InputLabel from '#material-ui/core/InputLabel';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
// import EventIcon from '#material-ui/icons/Event';
import SearchIcon from '#material-ui/icons/Search';
// import TodayIcon from '#material-ui/icons/Today';
import InputUnstyled from '#mui/base/InputUnstyled';
const Dictaphone = () => {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
return (
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
);
};
function updateInput(ish) {
document.setSearchField = "Rendering";
}
function SearchForm({ runSearch, setSearchField, setAuthorField, setVenue, setBeginDate, setEndDate, setShowGraph, show_loading }) {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
return (
<Grid container spacing={2}>
<Grid item xs={1} />
<Grid item xs={10}>
<Paper elevation={2}>
<div className="search-body">
<form onSubmit={runSearch}>
<Grid container spacing={2}>
<Grid item xs={12}>
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
<TextField
id="busca" label="Palavras-chave *"
type='text'
placeholder={transcript}
name='q'
variant="outlined"
fullWidth
InputProps={{
endAdornment: <SearchIcon />
}}
InputLabelProps={{
shrink: true
}}
onChange={setSearchField} />
I tried using value={transcript} in the text-field but it only will work after i write something after it. Example: i say "hello", it will write it in the text-field but it wont actually send "hello" until i write something with the keyboard after like "1". then it will send "hello1".
<TextField
id="busca" label="Palavras-chave *"
type='text'
value={transcript}
placeholder={transcript}
name='q'
variant="outlined"
fullWidth
InputProps={{
endAdornment: <SearchIcon />
}}
InputLabelProps={{
shrink: true
}}
onChange={setSearchField} />

I think it might work if you replace TextField with textarea including value={transcript} for the same.

React / MUI : How to call other class with hook to button in main App.js

I'm new to React/MUI.. I'm creating different components for now for a website, so the UI for now doesn't matter.
I'm facing this problem while trying to do a button to link me to the Sign Up page (Doing the same for Sign In):
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: ...
The following is my code:
SignUp.js
import React from 'react';
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Link from '#material-ui/core/Link';
import Grid from '#material-ui/core/Grid';
import Box from '#material-ui/core/Box';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import Typography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignUp() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
autoComplete="fname"
name="firstName"
variant="outlined"
required
fullWidth
id="firstName"
label="First Name"
autoFocus
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
required
fullWidth
id="lastName"
label="Last Name"
name="lastName"
autoComplete="lname"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox value="allowExtraEmails" color="primary" />}
label="I want to receive inspiration, marketing promotions and updates via email."
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="#" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
<Copyright />
</Box>
</Container>
);
}
App.js
import React from 'react';
import Container from '#material-ui/core/Container';
import Typography from '#material-ui/core/Typography';
import SignUp from './sign-up/SignUp.js';
import SignIn from './sign-in/SignIn.js';
import Box from '#material-ui/core/Box';
import Link from '#material-ui/core/Link';
import { Button, Paper } from '#material-ui/core';
export default function App() {
return (
<div>
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Creating a website!
</Typography>
<ProTip />
<button onClick={SignUp}>
Click me!
</button>
<SignIn />
<Copyright />
</Box>
</Container>
</div>
);
}
How do I properly convert in this case?

You're trying to call a React component as an event handler:
<button onClick={SignUp}>
That will not work. Instead you can for example create a flag, set it to true in the onClick handler and then render SignUp based on this flag.
const [showSignUp, setShowSignUp]= React.useState(false)
...
<button onClick={()=>setShowSignUp(s=>!s)}>Click me!</button>
{showSignUp ? <SignUp /> : <SignIn />}

useState is not working for material ui functional component(firebase)

I am trying to make a sign up form where I am using a material ui functional component
I am trying to attach a signup event to the sign up button in "onClick"
now I am trying to pass email and password in useState() and then trying to console.log(email,password) but it returns nothing
console doesn't show errors either
import React, { Component, useState } from 'react';
import {Route,} from "react-router-dom"
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Link from '#material-ui/core/Link';
import Grid from '#material-ui/core/Grid';
import Box from '#material-ui/core/Box';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import Typography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
import firebase from "firebase"
var Config ={ apiKey:"",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
}
firebase.initializeApp(Config);
function signup(event){
const{email,password}=this.props;
firebase.auth().createUserWithEmailAndPassword(email,password)
.then((user) => {
// Signed in
// ...
console.log(email,password)
var err = "Welcome "+ user.email;
firebase.database().ref('users/'+user.uid).set({email: user.email,password:user.password});
})
.catch((error) => {
var errorCode = error.code;
var errorMessage = error.message;
// ..
console.log(errorMessage)
});
}
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<Link color="inherit" href="https://material-ui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignUp(props) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<input
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
onChange={(e) => {
setEmail(e.target.value);
console.log(e.target.value)}}
autoComplete="email"
autoFocus
/>
</Grid>
<Grid item xs={12}>
<input
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
onChange={(e) => {
setPassword(e.target.value)
console.log(e.target.value);}}
autoComplete="current-password"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox value="allowExtraEmails" color="primary" />}
label="I want to receive inspiration, marketing promotions and updates via email."
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
onClick={signup}
>
Sign Up
</Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="#" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
<Copyright />
</Box>
</Container>
);
}
any idea what's happening?

I see two issues here:
You try to access email and password from this.props but you're keeping it as local state variables in your component.
Your signup method is outside of the scope of your functional component, as already mentioned in the comments. You can't access email and password here anyhow.
Move your function into the component function and remove this line const{email,password}=this.props; because email and password will then be available from the outer scope.

Material UI Drawer close

I have a material UI drawer and I can open it but when I try to close it the event is not even called.
import React from 'react';
import './App.css';
import { fade, makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import IconButton from '#material-ui/core/IconButton';
import Typography from '#material-ui/core/Typography';
import InputBase from '#material-ui/core/InputBase';
import Badge from '#material-ui/core/Badge';
import MenuItem from '#material-ui/core/MenuItem';
import Menu from '#material-ui/core/Menu';
import MenuIcon from '#material-ui/icons/Menu';
import SearchIcon from '#material-ui/icons/Search';
import AccountCircle from '#material-ui/icons/AccountCircle';
import MailIcon from '#material-ui/icons/Mail';
import HomeIcon from '#material-ui/icons/Home';
import NotificationsIcon from '#material-ui/icons/Notifications';
import MoreIcon from '#material-ui/icons/MoreVert';
import InputAdornment from "#material-ui/core/InputAdornment";
import Drawer from '#material-ui/core/Drawer';
import ChevronLeftIcon from '#material-ui/icons/ChevronLeft';
import ChevronRightIcon from '#material-ui/icons/ChevronRight';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import List from '#material-ui/core/List';
import Divider from '#material-ui/core/Divider';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
drawerOpen : false
};
this.handleDrawerOpen = this.handleDrawerOpen.bind(this);
this.handleDrawerClosed = this.handleDrawerClosed.bind(this);
}
handleDrawerOpen() {
this.setState({drawerOpen : true});
console.log("open");
}
handleDrawerClosed() {
this.setState({drawerOpen : false});
console.log("close");
}
render() {
return (
<div className={"topBar"}>
<AppBar >
<Toolbar className={"topBar"}>
<div className="divInside">
<IconButton
edge="start"
color="inherit"
onClick={this.handleDrawerOpen}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap>
Top Questions
</Typography>
</div>
<div className={"divInside"} style={{"minWidth" : "50%"}}>
<SearchIcon />
<InputBase
fullWidth={true}
placeholder="Search…"
/>
</div>
<div>
<IconButton color="inherit">
<Badge badgeContent={22} color="secondary">
<NotificationsIcon />
</Badge>
</IconButton>
<IconButton
edge="end"
color="inherit"
>
<AccountCircle />
</IconButton>
</div>
</Toolbar>
</AppBar>
<Drawer
variant="persistent"
anchor="left"
open={this.state.drawerOpen}
>
<div onClick={this.handleDrawerClose}>
<IconButton onClick={this.handleDrawerClose}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
{['Home', 'Categories'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index === 0 ? <HomeIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
</div>
);
}
}
What is the problem? I literally copied the example for persistent drawer from https://material-ui.com/components/drawers/
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.
It looks like your post is mostly code; please add some more details.

Your handler is called handleDrawerClosed but you are calling handleDrawerClose (without a 'd' on the end).
Update your handler to match the open handler and re-name it to handleDrawerClose
Also, use an IDE that will highlight problems like this for you automatically and save you time and frustration :-D