CODEWITHSUNDEEP
react-native
Diego Bittencourt
Diego Bittencourt

Reputation: 605

How can I access a state or props from a class outside it?

I have a file called message.js, on Render's message.js I have a component called <Audio>. This component is used to play an audio that are in an URL on Firebase, I have this URL in my message.js and I need to pass this to my Audio, I used the following code: <Audio sUrl={this.sAudioUrl} />. To access this URL in my Audio I use the following code: this.props.sUrl. The problem is: I can access the url only inside the Audio class, if I try to use outside it, I got the following error: undefined is not an object (evaluating 'this.props.sUrl').

I'll post the Adio's code so you can see where I use the props and maybe give me an idea on how I achieve what I need in a different way. Here's the code:

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

import Sound from 'react-native-sound'

var track = new Sound(this.props.sUrl, null, (e) => {
    if (e) {
        track = null
        console.log('error loading track:', e)
    } else {

    }
})

export default class Audio extends Component<{}> {

    state = {
        bDownloaded: true,
        bDownloading: false,
        bPlaying: false
    };

    playPauseTrack() {

        if (this.state.bDownloaded) {

            if (!this.state.bPlaying) {
                this.setState({ bPlaying: true })
                track.play()
            }
            else {
                this.setState({ bPlaying: false })
                track.pause()
            }
        }
    }

    render() {

        let sImg
        if (!this.state.bDownloaded) {
            if (this.state.bPlaying) {
                sImg = require('../../../../../images/pause.png')
            }
            else {
                sImg = require('../../../../../images/play.png')
            }
        }
        else
            sImg = null

        return (
            <View style={styles.container}>

                <TouchableOpacity activeOpacity={0.8} onPress={() => this.playPauseTrack()}>
                    <Image style={{ height: 36, width: 36, resizeMode: 'contain' }} source={sImg} />
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 16,
    },
});

You can see that I try to use the props on my var track.

Upvotes: 0

Views: 1546

Answers (2)

sebastianf182
sebastianf182

Reputation: 9978

After understanding your problem, you have a couple of choices.

The first option is to give your child component a ref prop, which you can then access to get a reference to the component. 

<Component ref='myRef'/>

Which you can then access with this.refs.myRef and you get your class.

Another option is to actually add a callback as a prop in your child. Example:

<Component callback={this.onUrlSet}/>

After that, in your child component, after your set your constant, you can do:

this.props.callback(sUrl);

That will execute your parent onUrlSet and you can do whatever you need with that prop.

This should not be necessary all the time, so maybe think about if you really need to do this. Passing information back and forth is not really a pattern in RN.

Edit:

The second error about the this.props is because you are calling it outside the component so this.props.sUrl does not exist. Try this inside the Audio component:

constructor(props){
  super(props);

var track = new Sound(this.props.sUrl, null, (e) => {
    if (e) {
        track = null
        console.log('error loading track:', e)
    } else {

    }
})

}

Cheers

Upvotes: 2

Sagar Chauhan
Sagar Chauhan

Reputation: 5823

You haven't any sUrl props passing to tracks. That's why it throw the error. If you are using any props inside class or outside class, then first you need to check, Is it not null and not undefined. Also, If you using any props then make sure it's assigning at use.

Upvotes: 0

Related Questions