CODEWITHSUNDEEP
react-native
Saeed Heidarizarei
Saeed Heidarizarei

Reputation: 8916

Getting `undefined is not an object` when I'm Reading json Data

Why I'm Getting undefined is not an object (evaluating 'this.props.artist.name') when I'm Reading data via React Native?

this.props.artist.name haven't access to name, What Should I do?
I want to use This Module for playing audio file and I want to read from my data, same as (https://github.com/devnacho/react-native-music-player/blob/master/app/components/artists/ArtistShow.js)
I Have 3 Page, 1:Router page 2:ArtistShow 3:player

This is My Data:

    const artist = [
      {
        name: "Soda Stereo",
        background: "http://cnnchile.com/uploads/imagenes/14344020424867_breaking.jpg",
        songs: [
          {
            title: "Un Misil En Mi Placard",
            album: "Comfort y Musica Para Volar",
            url: "https://www.freesound.org/data/previews/208/208096_3767678-lq.mp3",
          }
        ]
      }
    ]

And This is My ArtistShow Code:

class ArtistShow extends Component {


  renderStickyHeader() {
    return (
      <View style={styles.stickySection}>
        <Text style={styles.stickySectionTitle}>{this.props.artist.name}</Text>
      </View>
    );
  }

  render() {
    const { onScroll = () => { } } = this.props;
    return (
      <View>
        <ParallaxScrollView
          style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0, width: window.width, height: window.height }}
          parallaxHeaderHeight={PARALLAX_HEADER_HEIGHT}
          stickyHeaderHeight={STICKY_HEADER_HEIGHT}
          onScroll={onScroll}
          renderStickyHeader={this.renderStickyHeader.bind(this)}
        >

        </ParallaxScrollView>
        <View style={styles.headerClose}>
          <Icon onPress={Actions.pop} name="chevron-left" size={15} color="#fff" />
        </View>
      </View>
    );
  }
}

module.exports = ArtistShow;

This is Router Page:

class Example extends React.Component {
    render() {
        return (
            <Router createReducer={reducerCreate}>
                <Scene key="root">
                    <Scene key="artistahow" component={ArtistShow} title="ArtistShow" initial />
                    <Scene key="player" component={Player} title="Player" />
                </Scene>
            </Router>
        );
    }
}

export default Example;

Upvotes: 0

Views: 599

Answers (2)

eden
eden

Reputation: 6103

For react-native-router-flux, props are passed either dynamically Actions.scenekey(obj) or statically, in your navigation tree:

<Scene key='scenekey' component={MyComponent} artist={yourArtistObj} />

Since your Scene is initial, you should use the second method. However, this is not recommended and not useful. If you're going to define it like this, you should better initialize the artist variable in your Component. You don't have to pass it as a prop.

Upvotes: 2

Matt Aft
Matt Aft

Reputation: 8936

You need to make sure you're passing artist as a property to this component and artist is an array, so you would have to do something like this.props.artist[0].name which will give you the first artist's name.

Upvotes: 0

Related Questions