React-native how to use a state value in another javasript file

Question

I want to use a value, from the file Step3.js in Step4.js, the value can change after user input in Step3. But how can I use this value in Step4?

I have tried some things, but I guess I miss the point here, so hopefully somebody can help me out with this.

This is my code:

App.js:

import React, { Component } from 'react'
import { AppRegistry, StyleSheet, View, Text } from 'react-native'
import { ViewPager } from 'rn-viewpager'

import StepIndicator from 'react-native-step-indicator'

import Step1 from "./Step1";
import Step2 from "./Step2";
import Step3 from "./Step3";
import Step4 from "./Step4";

const PAGES = [{id: 1, page: <Step1/>},{id: 2, page: <Step2/>}, {id: 3, page: <Step3/>}, {id: 4, page: <Step4/>}];

const firstIndicatorStyles = {
    stepIndicatorSize: 30,
    currentStepIndicatorSize: 40,
    separatorStrokeWidth: 5,
    currentStepStrokeWidth: 3,
    separatorFinishedColor: '#4aae4f',
    separatorUnFinishedColor: '#a4d4a5',
    stepIndicatorFinishedColor: '#4aae4f',
    stepIndicatorUnFinishedColor: '#a4d4a5',
    stepIndicatorCurrentColor: '#ffffff',
    stepIndicatorLabelFontSize: 15,
    currentStepIndicatorLabelFontSize: 15,
    stepIndicatorLabelCurrentColor: '#000000',
    stepIndicatorLabelFinishedColor: '#ffffff',
    stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
    labelColor: '#666666',
    labelSize: 12,
    currentStepLabelColor: '#4aae4f'
};



export default class App extends Component {
    constructor (props) {
        super(props);
        this.state = {
            currentPosition: 0,
            stepCount: 4,
        }
    }

    componentWillReceiveProps (nextProps, nextState) {
        if (nextState.currentPosition != this.state.currentPosition) {
            if (this.viewPager) {
                this.viewPager.setPage(nextState.currentPosition)
            }
        }
    }

    render () {
        return (
            <View style={styles.container}>
                <ViewPager
                    style={{ flexGrow: 1 }}
                    ref={viewPager => {
                        this.viewPager = viewPager
                    }}
                    onPageSelected={page => {
                        this.setState({ currentPosition: page.position })
                    }}
                >
                    {PAGES.map(page => this.renderViewPagerPage(page))}
                </ViewPager>
                <View style={styles.stepIndicator}>
                    <StepIndicator
                        customStyles={firstIndicatorStyles}
                        currentPosition={this.state.currentPosition}
                        stepCount={this.state.stepCount}
                        labels={['Kleur', 'Vorm', 'Moeite', 'Overzicht']}
                    />
                </View>
            </View>
        )
    }

    renderViewPagerPage = (data) => {
        console.log(data);
        console.log(this.state.currentPosition);
        return (
            <View key={data.id}>
                {data.page}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffffff'
    },
    stepIndicator: {
        marginVertical: 20
    },
});

Step3.js:

export function getSelected3() {
    return this.state.selected;
}

class Step3 extends Component {
    constructor(props){
        super(props);
        this.state = {
            happy: {
                "id" : "1",
                "name" : "happy",
                "src" : require('../../assets/images/makkelijk.png')
            },
            normal: {
                "id" : "2",
                "name" : "normal",
                "src" : require('../../assets/images/gemiddeld.png'),
            },
            sad: {
                "id" : "3",
                "name" : "sad",
                "src" : require('../../assets/images/moeilijk.png'),
            },
            selected: {
                "id" : "4",
                "name" : "",
                "src" : require('../../assets/images/moeilijk.png'),
            },
        };
    }

    onPress = (item) => {
        this.state.selected.name = item.name;
        this.state.selected.src = item.src;
        alert(this.state.selected.name);
    };

    render() {
        return  (
            <View style={styles.container}>
                <View style={[styles.box]}>
                    <TouchableHighlight onPress={() => this.onPress(this.state.happy)}>
                        <Image
                            style={styles.image}
                            source={this.state.happy.src}
                        />
                    </TouchableHighlight>
                </View>
                <View style={[styles.box]}>
                    <TouchableHighlight onPress={() => this.onPress(this.state.normal)}>
                        <Image
                            style={styles.image}
                            source={this.state.normal.src}
                        />
                    </TouchableHighlight>
                </View>
                <View style={[styles.box]}>
                    <TouchableHighlight onPress={() => this.onPress(this.state.sad)}>
                        <Image
                            style={styles.image}
                            source={this.state.sad.src}
                        />
                    </TouchableHighlight>
                </View>
            </View>
        )
    }
}

So I want to use the date from the state in Step3 selected into Step4.js, How can I Do this?

Step4.js:

class Step4 extends Component {
constructor(props) {
    super(props);
    this.state = {
        value3: {
            "id": "3",
            "name" : "",
            "src" : "",
        },
    };
}

render() {

    let test = getSelected3();  
    this.state.value3.src = value3.src;
    return (
        <View style={styles.container}>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
            <View style={[styles.box]}>
                <TouchableHighlight>
                    <Image
                        style={styles.image}
                        source={this.state.value3.src}
                    />
                </TouchableHighlight>
            </View>
        </View>
    )
}

You should create a parent component for controlling the state of both steps and then pass the values through props to each of them. — Alex Sánchez, Apr 23 '19 at 09:49

score 1 · Accepted Answer · answered Apr 23 '19 at 09:51

1

Suggest you to make Step3 and Step4 components stateless which will receive only props and create a component Stepper which will render both Step3 and Step4. Stepper component will do all the state manipulations.

class Stepper extents Component {
    render() {
        const { state1, state2, state3, state4, onPress } = this.state;

        return [
            <Step3 state1={state1} state3={state3} onPress={onPress} />,
            <Step4 state2={state2} state4={state4}  />
        ];
    }
}

And Step3 would look like this:

const Step3 = ({ state1, state2, onPress }) => {
    return (<TouchableHighlight onPress={onPress}></TouchableHighlight);
};

Hope you get the idea.

answered Apr 23 '19 at 09:51

Ilarion Halushka

2,083
18
13

I already have something like a 'Stepper' class, I have updated the post – JJNL77 Apr 23 '19 at 10:23
that's great, now just make Step1..4 as functional stateless components and manipulate the state only in your App.js – Ilarion Halushka Apr 23 '19 at 10:28
Yes, but How can I access the states from app.js in step3 for example, because it's a step indicator I don't know how to give access to the states – JJNL77 Apr 23 '19 at 10:48
`` and `const Step3 = ({ state1, state2, onPress }) => { ` – Ilarion Halushka Apr 23 '19 at 10:56
so you are passing state from App.js to Step1..4 – Ilarion Halushka Apr 23 '19 at 10:56
and then if you want to modify App.js state from Step1..4 then you need to also pass some functions (again as props) to Step1..4 which will modify the state – Ilarion Halushka Apr 23 '19 at 10:57
When I const PAGES = [{id: 1, page: },{id: 2, page: }, {id: 3, page: }, {id: 4, page: }]; I get the error 'undefined is not an object' – JJNL77 Apr 23 '19 at 11:00
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192262/discussion-between-hilarion-galushka-and-jjnl77). – Ilarion Halushka Apr 23 '19 at 11:02

score -1 · Answer 2 · answered Apr 24 '19 at 08:08

Copy pasting my answer from a similar question

I usually create a global.js containing:

module.exports = {
   step3State: null,
};

And get the value of the state on the screen

render() {

GLOBAL.step3State = this;
//enter code here

}

Now you can use it anywhere like so:

GLOBAL.step3State.setState({
    var: value
});

or

Global.step3State.state.value

React-native how to use a state value in another javasript file

2 Answers2