CODEWITHSUNDEEP
react-nativereact-redux
howtopythonpls
howtopythonpls

Reputation: 790

How to initiate props when rendering Component?

I have a Login Component where I want the user to choose Service from a Service Catalogue. The Picker gets and sets values to redux:

<Picker
  selectedValue={this.props.service.id}
  onValueChange={itemValue => this.props.setServiceType(itemValue)}>
  {service_catalogue.map(service =>
      <Picker.Item key={service.id} label={service.id} value={service.id} />
  )}
</Picker>

But I don't know how to properly set the initial value. I set the default value in componentDidMount (the first item in the Catalogue), but I think componentDidMount is trigged on update? Is there a lifecycle function that is only triggered on rendering Component in React Native?

componentDidMount() {
  this.props.setServiceType(service_catalogue[0].id)
}

So the problem that I'm facing is that even though the user might choose "Instructor" the service becomes service_catalogue[0] = "Cleaner". And if I don't setServiceType on componentDidMount no Picker appears, as this.props.service.id doesn't exist.

Upvotes: 0

Views: 73

Answers (1)

peetya
peetya

Reputation: 3618

You can set default value for the props on the following way:

...
YourComponent.propTypes = {
  myState: PropTypes.string,
}

YourComponent.defaultProps = {
  myState: 'default value',
};

const mapStateToProps = state = ({
  myState: state.myState,
});

export default connect(mapStateToProps)(YourComponent);

More info: https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values

Upvotes: 1

Related Questions