Guys I need to define a simple component in RN, but I keep getting this error:
enter image description here
and this is my simple component code:
export default class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
and the way I import it into my page(Intro.js):
export default class App extends Component<{}> {
render() {
return (
<Welcome name="Sara" />
);
}
}
Finally I call the page including the component(Intro.js) in my app.js like this:
import { Intro } from './app/screens/Intro.js';
export default class App extends Component {
render(){
return(
<Intro />
)
}
}
version I'm using:
react-native-cli: 2.0.1
react-native: 0.49.3
Appreciate your answers
As i can see in your code
export default class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
You had use which is html tag not a react natine element or component.
So this may be the reason for the error.
You can use this code.
export default class Welcome extends Component {
render() {
return <Text>Hello, {this.props.name}</Text>;
}
}
Related
I am just getting started with React native and I came across a rather unexpected bug. Consider the code below
export default class RecipePage extends Component {
state = {
ingredients: ["apple", "orange"]
}
render() {
return (
<View>
<ShowRecipes ingredients={this.state.ingredients} />
</View>
)
}
}
class ShowRecipes extends Component {
render() {
return (
<View>
<Text>This is inside ShowRecipes</Text>
</View>
)
}
}
export default ShowRecipes
I get an error below which points to <ShowRecipes ingredients={this.state.ingredients} />
"TypeError: undefined is not an object"
I am getting this error and I am not able to figure out what's causing it. Can someone please help fix this mistake.
Any help is appreciated.
You should put State in the contructor to get like this this.state.something
Try this code.
export default class RecipePage extends Component {
constructor(props) {
super(props)
this.state = {
ingredients: ["apple", "orange"]
}
}
}
The function componentDidMount is not firing.
This is some of my code:
import React, { Component } from 'react';
import { Block } from 'galio-framework';
export function FriendRequests ( ) {
const username = 'abcd';
componentDidMount = () => {
alert("abcd");
}
return (
line number 37: <Block>....</Block>
)
}
You are using the functional component which doesn't have the lifecycle methods.
Solution 1:
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class FriendRequests extends Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount = () => {
alert("abcd");
}
render() {
return (
<View>
<Text> Your text Here </Text>
</View>
);
}
}
export default FriendRequests;
Solution 2:
If you want to use it as functional component then you can use the React Hook and can make use of useEffect() method from the hook instead of componentDidMount. method to handle after render stuff.
First of all,
export function FriendRequests ( ) {
componentDidMount = () => {
alert("abcd");
}
return (
....
)
}
this is a functional component, and functional component dont have any inbuilt functions like componentDidMount. Only class based components have access, So try this:
UPDATE:
export class FriendRequests extends React.Component {
componentDidMount() {
alert("abcd");
}
render() {
return (
<View>
<Text>hey</Text>
</View>
);
}
}
hope it helps. feel free for doubts
This file import
class Footer extends Component {
_notifications = () => {
const { navigate } = this.props.navigation;
navigate('Ntf', {});
}
render() {
return (<TouchableHighlight onPress={() => this._notifications()} ></TouchableHighlight>);
}
}
This file main ( React-Navigation - NavigationDrawerStructure ).
import { Footer } from './Footer';
export default class HomePage extends Component {
render() {
return (<View><Footer/></View>);
}
Click _notifications button after error : undefined is an object c.props.navigation.navigate
Help me please
Only the components defined in routes has access to the navigation props not the child of those components!.
Solution:-
import file
class Footer extends Component {
_notifications = () => {
this.props.NavigateToNTF()
}
render() {
return (<TouchableHighlight onPress={() => this._notifications()} ></TouchableHighlight>);
}
}
main file:-
import { Footer } from './Footer';
export default class HomePage extends Component {
render() {
return (<View><Footer NavigateToNTF={()=> this.props.navigation.navigate('Ntf', {}) } /></View>);
}
Navigation props are not available in child component that's why you are getting undefined when you call navigation props but with this solution we are sending props from the parent file (main file) to the child (export file) so that way it will work!.
If it helps! make sure to motivate me 😜 you know what i mean!.
I have been using React Native for a few years and have only recently needed to utilise Redux on a new, more complex project. I am currently in the process of following a number of tutorials trying to work my way through the basics.
I am currently stuck with the following error:
Invariant Vilation: Could not find "store" in either the context of props of "Connect(App)"
I have found a number of posts with information about this error but because of the low amount of knowledge I currently have, I am unsure as to how to correctly implement a fix.
This project was created with create-react-native-app and I am using the Expo app to test.
In my eyes this should work because the root element of App is a Provider element passing the store as a prop which seems to contradict what the error is saying.
configureStore.js
import { createStore, applyMiddleware } from 'redux';
import app from './reducers';
import thunk from 'redux-thunk';
export default function configureStore() {
return createStore(app, applyMiddleware(thunk));
}
App.js:
import React from 'react';
import { Text } from 'react-native';
import { Provider, connect } from 'react-redux';
import configureStore from './configureStore';
import fetchPeopleFromAPI from './actions';
const store = configureStore();
export class App extends React.Component {
componentDidMount() {
props.getPeople()
}
render() {
const { people, isFetching } = props.people;
return (
<Provider store={store}>
<Text>Hello</Text>
</Provider>
);
}
}
function mapStateToProps(state) {
return {
people: state.people
}
}
function mapDispatchToProps(dispatch) {
return {
getPeople: () => dispatch(fetchPeopleFromAPI())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
You are trying to access the store in the App component even before it has been passed. Therefore it is not able to find the store.
You need to make a separate component and connect that using react-redux such as
<Provider store={store}>
<ConnectedComponent />
</Provider>
...
class ConnectedComponent extends React.Component {
componentDidMount () {
this.props.getPeople()
}
render() {
return (
<View>
<Text> ... </Text>
</View>
)
}
}
function mapStateToProps(state) {
return {
people: state.people
}
}
function mapDispatchToProps(dispatch) {
return {
getPeople: () => dispatch(fetchPeopleFromAPI())
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ConnectedComponent);
what is the actual use of render().why we use this? Can we use this in both functional and class based components?
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);
A functional component essentially is the render function of its class companion.
const render = props => <div />
same as:
class extends Component {
render() { return <div /> } // props via this.props
}
It's the most important function in React as it tells your target (web, or native in your case) what to display on the screen.