I'm using Ant Design Framework for my React project. But when importing components, it yells an error even though I haven't declared those components before.
ERROR:
Module build failed: Duplicate declaration "Icon"
Here is the code:
// App.js
import React from 'react';
import ReactDOM from 'react-dom';
import { FullSpinner } from "./Spinner"
class App extends React.Component {
render() {
return (<div>sdkfjsdf</div>)
}
}
export default App
// Spinner.js
import { Spin, Icon } from 'antd';
import React from 'react'
import {Icon, Spin} from 'antd';
const antIcon = () => <Icon type="loading" style={{ fontSize: 24 }} spin />;
export const FullSpinner = () => <Spin indicator={antIcon} />
You have imported Icon component multiple times.
// Spinner.js
import { Spin, Icon } from 'antd';
import React from 'react'
import {Icon, Spin} from 'antd'; <- Duplicate
const antIcon = () => <Icon type="loading" style={{ fontSize: 24 }} spin />;
export const FullSpinner = () => <Spin indicator={antIcon} />
Try after removing import { Spin, Icon } from 'antd'; from Spinner.js
Your Spinner.js file is importing the Spin and Icon twice from the antd module. You can safely remove one of those lines.
// Spinner.js
import React from 'react'
import {Icon, Spin} from 'antd';
const antIcon = () => <Icon type="loading" style={{ fontSize: 24 }} spin />;
export const FullSpinner = () => <Spin indicator={antIcon} />
Related
I'm trying to create a basic setup for react navigation, but for some reason, when I go to view the project, I get a blank screen and an error in terminal that says:
Error: The component for route 'screens' must be a React component. For example:
import MyScreen from './MyScreen';
...
screens: MyScreen,
}
You can also use a navigator:
import MyNavigator from './MyNavigator';
...
screens: MyNavigator,
}
I've looked at other Stack Overflow solutions, but none of them seem to apply in my case, so, is there something else I'm doing wrong here?
My App.js (Also importing fonts here, but these worked, it seems to be an issue with the routing)
import React, {useState} from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import Navigator from './routes/homeStack';
const getFonts = () => Font.loadAsync({
'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf')
});
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if (fontsLoaded) {
return (
<Navigator />
);
} else {
return (
<AppLoading
startAsync= {getFonts}
onFinish= {()=> setFontsLoaded(true)}
onError= {()=> console.log('error')}
/>
);
}
}
homeStack.js
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Home from '../screens/home';
import Scanner from '../screens/scanner';
const screens = {
Home: {
screen: Home
},
Scanner: {
screen: Scanner
},
};
const HomeStack = createStackNavigator({screens});
export default createAppContainer(HomeStack);
home.js
import React from 'react';
import { StyleSheet, View, Text, } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Home() {
return (
<View style={globalStyles.container}>
<Text style={globalStyles.titleText}>Home Screen</Text>
</View>
);
}
scanner.js
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { globalStyles } from '../styles/global';
export default function Scanner() {
return (
<View style={globalStyles.container}>
<Text>About Screen</Text>
</View>
);
}
My file directory
Any help would be much appreciated!
The video you are following along with is really old and probably not up to date anymore. Please follow the installation guides and then follow along this guide. That should get you up and running in minutes.
I have built a ReactJS component for rendering emoction. Separate component can be built for each emoction, but I want to use one component but pass separate emoction as required.
This is what works so far:
emoction.js
import { faHeart } from "#fortawesome/free-solid-svg-icons";
import { faHeartBroken } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import React, { useState } from 'react';
const Emoction = () => {
return (
<FontAwesomeIcon icon={faHeart} />
);
};
export default Emoction;
emoction_hb.js
import { faHeart } from "#fortawesome/free-solid-svg-icons";
import { faHeartBroken } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import React, { useState } from 'react';
const EmoctionHb = () => {
return (
// <input type="text" />
<FontAwesomeIcon icon={faHeartBroken} />
);
};
export default EmoctionHb;
Now, I am bundling these two components as:
expanded_content.js
import Emoction from "../emoctions/emoctions";
import EmoctionHb from "../emoctions/emoctions_hb";
import styled from "#emotion/styled";
import { faHeartBroken } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import React, { Component } from 'react';
const Merged = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-start;
`;
const expandedContent = () => {
return(
<div>
<Merged>
<Emoction/>
<EmoctionHb/>
</Merged>
</div>
)
};
export default expandedContent;
which when I rendered using App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import expandedContent from './components/merged_component/expanded_content'
class App extends React.Component {
render(){
return(
<Router>
<>
<Route path='/ExpandedContent' exact component={expandedContent}/>
</>
</Router>
)
}
}
export default App;
gives me.
What I am trying to do is that instead of creating a component called emoctions_hb.js I want to reuse emoction.js by passing "faHeartBroken" as the value in it.
If emoction.js is called without any value, I want it to use "faHeartBroken" as default value.
Tried following on to create Parent-Child relationship using https://webomnizz.com/change-parent-component-state-from-child-using-hooks-in-react/ but it did not work out for me.
Just pass the icon as a prop and set the default value to faHeartBroken:
const Emoction = ({ faIcon = faHeartBroken }) => {
return (
<FontAwesomeIcon icon={faIcon} />
);
};
It looks like you're importing useState but you're not implementing it anywhere. You could try implementing state in your expanded_content.js file and pass that down to your child component emoction.js, like this:
const ExpandedContent = () => {
const [heart, setHeart] = useState(true)
return(
<div>
<Emoction heart={heart} setHeart={setHeart}/>
</div>
)
};
export default ExpandedContent;
Notice that you will need to change the name of your component. See the docs here https://reactjs.org/docs/hooks-rules.html.
Then, inside of your Emoction component you will have access to heart which is set to true by default and you can also implement some logic to toggle the state using the function setHeart which is passed down from ExpandedContent:
const Emoction = ({heart, setHeart}) => {
const handleHearts = () => {
setHeart(heart => !heart)
}
return (
heart ? <FontAwesomeIcon icon={faHeart} /> : <FontAwesomeIcon icon={faHeartBroken} />
);
};
export default Emoction;
By using a ternary statement to return your component you can decide to show faHeart or faHeartBroken depending on the current state. All you need to do is add the functionality wherever you need it.
I have been struggling with the code below.
Here is the error.
enter image description here
This is my OnboardPage.js
import React, { Component } from 'react';
import {
View,
StyleSheet,
Button,
Text
} from 'react';
import { render } from 'react-dom';
import { TouchableOpacity } from 'react-native';
const OnboardPage = () => {
return(
<View>
<Text>
OnboardPage
</Text>
</View>
);
};
export { OnboardPage };
This is my App.js
import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
import { StyleSheet, Text, View } from 'react-native';
import OnboardPage from './Screens/OnboardPage';
const Stack = createStackNavigator();
const App = () => {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName= {"OnboardPage"}>
<Stack.Screen name = "OnboardPage" component = {OnboardPage} />
</Stack.Navigator>
</NavigationContainer>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
I don't know what's happening. I have tried several fixes from here and then decided to post myself as none of them are working.
This occur as a result of how you are exporting the OnboardingScreen.so basically when you use the "export default " you must import it using this syntax import Onboarding from ""./Onboarding
//pattern one
//Onboarding.js
export const OnboardPage = () => {
//your code goes here
};
//App.js
import {Onboarding} from './Onboarding'
//Pattern Two
//Onboarding.js
export default function(){}
//App.js
import Onboarding from './Onboarding';
Emphasis are on the import and export.I also do recommend looking up Named export vs default export
So I am trying to take a user input and output that through Material UI expansion panels this is currently what i have to do so. but im getting an error saying this.props.GitInput is not a function
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import RaisedButton from 'material-ui/RaisedButton';
import IdentificationField from './IdentificationField';
import DataGraph from './DataGraph';
import PropTypes from 'prop-types';
class AssociateIdentification extends Component {
constructor() {
super();
this.state = {
GitInput: '',
};
this.GitInput = this.GitInput.bind(this);
}
componentDidMount() {
if (this.props.id !== 0) {
this.GitInput();
}
}
componentDidUpdate(_, prevState) {
if (prevState.id !== this.state.id) {
this.GitInput();
}
}
GitInput() {
this.props.GitInput(this.state.id);
}
render() {
return (
<div>
<input type="text" onChange={this.handleSubmit} />
{this.state.GitInput}
</div>
);
}
}
export default (AssociateIdentification);
and I am outputing it like this on a seperate component.
import React from 'react';
import { MockGit } from './Constants';
import ExpansionPanelSummary from '#material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '#material-ui/core/ExpansionPanelDetails';
import Typography from '#material-ui/core/Typography';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import ExpansionPanel from '#material-ui/core/ExpansionPanel';
import GitInput from './AssociateIdentification';
const GitData = () => {
return (
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography> {MockGit} </Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<Typography>
{GitInput}
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
);
};
export default (GitData);
I know this is fairly simple but I am struggling to get it to work.
I have the following component, that is build with https://material-ui-next.com/.
import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {lightBlue} from 'material-ui/colors';
const theme = createMuiTheme({
palette: {
primary: {
main:lightBlue['A700']
},
text: {
primary: '#fff',
}
},
});
const View = (props) => (
<MuiThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="title">
{props.title}
</Typography>
</Toolbar>
</AppBar>
</MuiThemeProvider>
);
export default View;
I am trying to write a test for it:
import React from 'react';
import { shallow } from 'enzyme';
import View from '../Views/View';
import { Typography } from 'material-ui';
it('renders', () => {
const wrapper = shallow(<View title='Welcome' />);
expect(wrapper.find('Typography').text()).toEqual('Welcome');
});
How to write a test for a component, that is using material-ui components? In the case above, I tried to figure out, if the component contains Welcome.
I read https://material-ui-next.com/guides/testing/, but it is not clear, how can I write a test.
UPD: API changed from shallow to mount
Did you tried to use their API described here?
Probably your test can look something like this:
import React from 'react';
import { createMount } from 'material-ui/test-utils';
import View from '../Views/View';
import { Typography } from 'material-ui';
it('renders', () => {
const mount = createMount();
const wrapper = mount(<View title='Welcome' />);
expect(wrapper.find('Typography').text()).toEqual('Welcome');
});