react-native : cant add props to component

Question

im working on simple program. I have List.js and Detail.js and i want to get List.js state in Detail.js using Props but not working (props returns nothing). I tried this but still not working. This is what i did so far :

List.js :

import {Detail} from './Detail';
.
.
.
.
GetItem (nama,id) {
  this.setState({id: id});
  return this.props.navigation.navigate('detail');
}
.
.
.
.
render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (

      <View style={styles.MainContainer}>
      <View><TextInput style={{height: 40,width: 300, marginTop:10}}
      onChangeText={this.onKeyChanges.bind(this)}
      />
      </View>
        <View><ListView
          dataSource={this.state.dataSource}
          renderSeparator= {this.ListViewItemSeparator}
          renderRow={(rowData) => <Text style={styles.rowViewContainer}
          onPress={this.GetItem.bind(this, rowData.nama,rowData.id)} >{rowData.nama}</Text>}
        />
        </View>
      <Detail data={this.state.id}/>
      </View>
    );
}

Detail.js

export class Detail extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state = {
      id: props.data
    }
  }

  componentWillUpdate(nextProps, nextState) {
        nextState.id = nextProps.data;
    }

  render() {
    return <Text>{this.state.id}</Text>;
  }
}

the <Text>{this.state.id}</Text>; shows nothing

bennygenel · Accepted Answer · 2017-09-24T11:15:48.690

1

You need to change this,

GetItem (nama,id) {
  this.setState({id: id});
  return this.props.navigation.navigate('detail');
}

to this

// setState is asynchronous
GetItem (nama,id) {
  this.setState({id: id}, () => {
    this.props.navigation.navigate('detail');
  });
}

And you need to get new prop on Details component and update the state. There is a really good answer for Why you shouldn't modify state directly

componentWillReceiveProps(nextProps) {
  this.setState({ id: nextProps.data });
}

edited Sep 24 '17 at 11:15

answered Sep 24 '17 at 10:31

bennygenel

23,896
6
65
78

thanks that is a good answer, but the `{this.state.id}` still shows nothing, seems like the props from List.js is not passed to Detail component. because when i try `this.setState({ id: "Test" });` the state did not changed @bennygenel – janotama Sep 24 '17 at 10:57
It can be a visual problem. Please do `console.log(nextProps.id)` in `componentWillReceiveProps` and see if you can see the right id. – bennygenel Sep 24 '17 at 11:00
the `console.log(nextProps.id)` prints undefined, seems the problem is on List.js when passing props to Detail, but i dont know why @bennygenel – janotama Sep 24 '17 at 11:07
Can you try changing `onPress={this.GetItem.bind(this, rowData.nama,rowData.id)}` to `onPress={(event) => this.GetItem(rowData.nama, rowData.id)}` – bennygenel Sep 24 '17 at 11:10
it still undefined @bennygenel :'( – janotama Sep 24 '17 at 11:12
can you update your question with the last version of it please – bennygenel Sep 24 '17 at 11:14
1

i got it sir, i changing the nextProps.id to nextprops.data, thank you!! @bennygenel – janotama Sep 24 '17 at 11:14
1

I was just writing that – bennygenel Sep 24 '17 at 11:15

react-native : cant add props to component

1 Answers1

Linked