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";
Related
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';
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.
I want to import two modules having same name i.e
import {Input, Icon} from 'native-base'
and
import {Input, Button} from 'react-native-elements'
How can I import and use both of them in my JSX? is it possible?
You can use as when importing
import {Input as InputBase, Icon} from 'native-base'
import {Input, Button} from 'react-native-elements'
Yes you can use import as:
import {Input as NativeBaseInput, Icon } from 'native-base'
import {Input, Button} from 'react-native-elements'