I'm new to ReactJs. I got this error when I'm trying on a tutorial. My form.js file is,
import React,{UseState, useEffect} from 'react';
import { Grid } from '#material-ui/core';
const initialFvalues ={
id:0,
fullName:'',}
export default function form(){
const [values,setValues] = UseState(initialFvalues);
return(
<form>
<Grid>
<Grid container>
<Grid item xs={6}><TextField variant="Outlined" label="Full Name" value={values.fullName}/></Grid>
</Grid>
</Grid>
</form>
)
}
The error is:
TextField' is not defined react/jsx-no-undef
Can someone please help
missing import of textfield. Please add below import in your code.
import TextField from '#material-ui/core/TextField';
or
import { TextField } from '#material-ui/core';
Missing import statement for TextField
Add the following to your imports
import { Grid, TextField } from '#material-ui/core';
or
import TextField from '#material-ui/core/TextField';
You haven't import the TextField from other file
import it as
import Texfield from './textfield.js';
or
import Texfield from '#material-ui/core';
Related
I want to import Button as MaterialButton alias
import Button from "#material-ui/core/Button";
const test => (<Button></Button>)
to
import * as MaterialButton from "#material-ui/core/Button";
const test => (<MaterialButton></MaterialButton>)
I get this error
I just found out that this also works in addition to Viet's answer
import {Button as MaterialButton} from "#material-ui/core";
Just rename import like this:
import MaterialButton from "#material-ui/core/Button";
I copy and paste the examples I find (including the imports) but it doesn't recognize the objects. Something is missing in the configuration.
However this does work:
const useStyles = makeStyles((theme) =>
Imports for these 2 examples:
import React, { useState } from 'react';
import { createStyles, makeStyles, Theme } from '#material-ui/core/styles';
import InputLabel from '#material-ui/core/InputLabel';
import FormHelperText from '#material-ui/core/FormHelperText';
import FormControl from '#material-ui/core/FormControl';
import Select from '#material-ui/core/Select';
import NativeSelect from '#material-ui/core/NativeSelect';
Example copied and pasted: demo.tsx
My app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import '../css/app.css';
import NativeSelects from './components/NativeSelects';
import { IntlProvider, FormattedMessage } from "react-intl";
ReactDOM.render(<Router><NativeSelects /></Router>, document.getElementById('root'));
I copy the content of the demo.tsx file and copy it to a NativeSelect.js
The example code that you copied is in typescript, you are probably using just javascript
I am new to react and trying to pass props from one functional component to another.
Here is component 1:
import React from 'react'
import TeamItem from './TeamItem'
import KKR from '../../assets/smith.jpeg'
export default function Teams() {
return (
<div>
<TeamItem title={1} />
</div>
)
}
Here is component 2:
import React from "react";
import "./teams.css";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Typography from "#material-ui/core/Typography";
import KKR from '../../assets/smith.jpeg'
const useStyles = makeStyles({
card: {
maxWidth: 445
},
media: {
height: 240
}
});
export default function TeamItem(props) {
const classes = useStyles();
console.log(props.title, '>>>>>>>>>>>>>')
return (
<h1>{props.title}</h1>
);
}
The props.title is undefined here. I am not sure where I am wrong.
Hi #dodo As you described here Code is looking completely fine to me. I tried it locally and got the value 1 from props.title. please try restarting your server.
How to redirect to another page in reactjs. Here is my code.
import React from 'react';
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 NotificationsIcon from '#material-ui/icons/Notifications';
import MoreIcon from '#material-ui/icons/MoreVert';
export default function PrimarySearchAppBar() {
function logout(){
this.props.history.push({pathname:'/'})
}
}
Whenever I try to redirect its sayas "TypeError: Cannot read property 'props' of undefined"
how can i fix this?
Your component should look something like this
class PrimarySearchAppBar extends React.PureComponent {
logout = () => {
this.props.history.push({ pathname: '/' });
}
render() {
// some render logic here
return <button onClick={this.logout}>Logout</button>;
}
}
export default PrimarySearchAppBar;
Or with stateless components like this
const logout = (props) => {
props.history.push({ pathname: '/' });
}
const PrimarySearchAppBar = (props) => {
// some render logic here
return <button onClick={() => logout(props)}>Logout</button>;
}
export default PrimarySearchAppBar;
Be careful that with stateless components, you can't use this keyword, but you have to pass it like standard paramater.
Trying to use an outlined button from material UI : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/buttons/OutlinedButtons.js
But get the error - "Unexpected use of 'self' no-restricted-globals"
And I don't have permissions to change it in the lodash.throttle/index.js file.
Is there any workaround for this that anyone knows of?? (It's literally just the sample code btw)
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../node_modules/#material-ui/core/styles';
import Button from '../node_modules/#material-ui/core/Button';
const styles = theme => ({
button: {
margin: theme.spacing.unit,
},
input: {
display: 'none',
},
});
function OutlinedButtons(props) {
const {classes} = props;
return (
<div>
<Button variant="outlined" className={classes.button}>
Default
</Button>
</div>
);
}
OutlinedButtons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(OutlinedButtons);
After a request. App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import UserGroup from './components/user_group';
import ButtonTest from './components/Button';
import OutlinedButtons from './components/floatingButton'
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<header className="App-header">
{ OutlinedButtons }
</header>
</div>
</MuiThemeProvider>
);
}
}
export default App;
And index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();