Title: How to modify state of a component from a routed component?
Tags: reactjs;react-native;react-navigation
Question: I'm building a react native application where users can create event and invite people.
But I'm having some problems modifying the state of the component from a routed component.
There is a createEvent screen where user tries to create event...on clicking on invite people button a new screen is rendered let's name it as invitePeopleScreen.
If i'm not wrong...I think I need to use redux.
The createEvent screen:
import React from 'react';
import {Button, Container, Form, Input, Item, Text, Textarea} from "native-base";
export default class createEventScreen extends React.Component{
constructor(props) {
super(props);
this.state = {
title: '',
description: '',
createdBy: '',
invites: []
};
createEvent () {}
render() {
return (
<Container&gt;
<Text&gt;Create An Event </Text&gt;
<Form&gt;
<Item rounded&gt;
<Input keyboardType="default"
placeholder="Enter the event title"
onChangeText={ title =&gt; this.setState({ title: title }) } /&gt;
</Item&gt;
<Item rounded&gt;
<Textarea keyboardType="default"
placeholder="Enter the event description"
onChangeText={ description =&gt; this.setState({ description: description }) } /&gt;
</Item&gt;
</Form&gt;
<Button rounded onPress={ () =&gt; { this.props.navigation.navigate('invitePeople') }}&gt;
<Text&gt;Invite People</Text&gt;
</Button&gt;
<Button rounded onPress={this.createEvent}&gt;
<Text&gt;Create Event</Text&gt;
</Button&gt;
</Container&gt;
)
Here is the invitePeople Screen:
import React from 'react';
import { Container } from "native-base";
export default class inviteUsersScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
addInvite = (username) =&gt; {
// push the username into the invites array of createEventScreen
render() {
return (
<Container&gt;
<Text&gt;Invite People </Text&gt;
<Form&gt;
<Item rounded&gt;
<Input keyboardType="default"
placeholder="Enter the username"
onChangeText={ (username) =&gt; {this.setState({ username: username)})} /&gt;
</Item&gt;
</Form&gt;
<Button rounded onPress={ () =&gt; { this.addInvite(this.state.username) }}&gt;
<Text&gt;Submit</Text&gt;
</Button&gt;
);
I am exactly not sure what code will go into addInvite function.

Here is the accepted answer: You have three options to achieve this, option 1: pass a function as a prop to the next screen, option 2: use async storage, option 3: Redux.
Option: 1.
in your CreateEventScreen pass a function to the second screen as prop.
addInvite = username =&gt; {
this.setState({
invites: [...this.state.invites, username],
<Button
rounded
onPress={() =&gt; {
this.props.navigation.navigate('InvitePeople', {
addInvite: this.addInvite,
});
}}&gt;
<Text&gt;Invite People</Text&gt;
</Button&gt;
In your InviteUsersScreen, get the function and pass username.
addInvite = username =&gt; {
// push the username into the invites array of createEventScreen
const addInvite = this.props.navigation.getParam('addInvite', () =&gt; {
alert('No function was passed');
addInvite(username);
Option 2: AsyncStorage
import {AsyncStorage} from 'react-native';
// create function for saving items to storage
export const SaveItem = async (key, value) =&gt; {
try {
await AsyncStorage.setItem(key, value);
console.log('saved')
} catch(e) {
console.log(e)
// create function for saving items to storage
export const ReadItem = async key =&gt; {
try {
var result = await AsyncStorage.getItem(key);
return result;
} catch (e) {
return e;
Then you can add items to the storage in your InviteUsersScreen.
addInviteWithStorge = username =&gt; {
const usernames = [...this.state.storageUsernames, username];
this.setState({
storageUsernames: usernames,
username: '',
const invites = JSON.stringify(usernames);
SaveItem('invites', invites)
.then(res =&gt; {
console.log('saved', res);
})
.catch(e =&gt; console.warn(e));
Retrieve items in your CreateEventScreen.
ReadItem('invites')
.then(res =&gt; {
if (res) {
const invites = JSON.parse(res);
this.setState({
invites: invites,
});
.catch(e =&gt; console.warn(e));

Here is another answer: Something like that perhaps:
addInvite = (e, username) =&gt; {
e.preventDefault();
this.setState({
list: [...this.state.list, username]
Assuming you add to your state a list prop
Comment for this answer: But how do i pass the prop?? It is a routed component.
Comment for this answer: Yeah, probably I need to implement redux
Comment for this answer: If they don't have a relationship Parent-Child component and/or they are not in the same path of the routes the best option would be to use redux. You would submit with addInvite, dispatch an action with your username, the reducer would add the username to the list and then you would pull the list/array into your CreateEventScreen component as prop within mapStateToProps.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:05/11/19', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<reactjs><react-native><react-navigation>', 'Title': 'How to modify state of a component from a routed component?', 'ViewCount': 38, 'id': 56091547, 'user_AboutMe': '', 'user_AccountId': 11488100.0, 'user_DisplayName': 'Goutam B Seervi', 'user_Reputation': 956.0, 'user_Views': 133.0, 'user_id': 8420068.0}}