React-native - passing values between components

Question

I know there's many similar threads but since I have a hard time understanding the answers I figured I might try with my own code and see if I can make any sense of the answers.

I just set this up really simple to test it out. I have an Index file that is opened when I start the app. In the index I have testValue in this.state:

Update:

In SignIn:

 constructor(props){
        super(props);
        this.state={
          credentials: {
            username: "",
            password:"",

          }
        }
        this.navigate = this.props.navigation.navigate;

    {...}

    this.navigate("main", {
                credentials: this.state.username,

              });

In main:
    constructor(props) {
            super(props);
        this.params = this.props.navigation.state.params;
        this.navigate = this.props.navigation.navigate;

       {...}

    render() {
        console.log(this.params.username);

you didn't show the code where you are passing the prop. show the render method where TestIndex is used — azium
– azium, Commented Apr 28, 2018 at 21:26
I am not passing the prop. How do I do that? I just have it in this.state — J. Doe
– J. Doe, Commented Apr 28, 2018 at 21:30
If you want 'testValue' to be a prop, then when you use TestIndex from Index, you have to do something like <TestIndex testValue={this.state.testValue}> — TKoL
– TKoL, Commented Apr 28, 2018 at 21:31
<TestIndex testValue={this.state.testValue}> Do I pass this on somehow with the button or just paste that somewhere? Yes, I understand I sound like a moron but I just can't wrap my head around this. — J. Doe
– J. Doe, Commented Apr 28, 2018 at 21:39

Henning Hall · Accepted Answer · 2018-04-29 17:14:18Z

1

This would actually log the testValue. All you have to do is to pass the testValue state as a prop in TestIndex component. Like this:

Index.jsx

export default class Index {

    constructor(props) {
        super(props);
        this.state = {
            testValue: 'hello'
        }
    }

    render() {
        return <TestIndex testValue={this.state.testValue} />
    }
}

TestIndex.jsx

export default class TestIndex extends React.Component {
    index() {
        this.props.navigation.navigate("index")
    }
    handleClickMain = () => {
        this.props.navigation.navigate("index");
    }
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.btn} onPress={() => {
                    console.log(this.props.testValue) //here's where I want it to log testValue from the index file
                    this.handleClickIndex()
                }
                }>
                </TouchableOpacity>
            </View>
        );
    }
}

answered Apr 29, 2018 at 17:14

Henning Hall

1,4872 gold badges15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J. Doe Over a year ago

I feel like I'm very close with your response, thanks for that. I have (a lot) more than that in the index render though and when I do that I just go directly to the TextIndex file instead of clicking my way there. Is it possible to return <TestIndex testValue={this.state.testValue} /> within the button {} or should I createClass somehow? Again, thanks for your comment, I really thought I got it this time

Collectives™ on Stack Overflow

React-native - passing values between components

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related