TypeError: undefined is not an object (evaluating 'const.join')

Question

How to declare an array on a state variable

Im using react native expo and firebase all is up to date

export default class Profile extends Component {
  state = {
    ageRangeValues: this.props.user.ageRange,
    distanceValue: [this.props.user.distance],
}
render() {
    const {
      ageRangeValues,
      distanceValue,
    } = this.state;

return (
      <View>
      <Slider
        min={5}
        max={100}
        values={distanceValue}
        onValuesChange={val => this.setState({ distanceValue: val })}
        onValuesChangeFinish={val => this.updateUser('distance', val[0])}
      />
    <Slider
        min={18}
        max={70}
        values={ageRangeValues}
        onValuesChange={val => this.setState({ ageRangeValues: val })}
        onValuesChangeFinish={val => this.updateUser('ageRange', val)}
      />
        </View>) }

I expect this to work fine but the ageRangeValue is undefined but the distanceValue in defined don't know why may be is because ageRangeValue takes ageRange and its an Array. If I declare areRangeValue: [19, 20], everything works, but if I left it the way it is all my values are undefined

and here is my preload

const firebaseConfig = {
  apiKey: 'XXXXXXXXX',
  databaseURL: 'XXXXX',
  storageBucket: 'XXXXX',
};

firebase.initializeApp(firebaseConfig);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    width: null,
    height: null,
    resizeMode: 'contain',
  },
});

export default class Preload extends Component {
  constructor() {
    super();
    this.loadApp();
    // SVGAnimatedLengthList.loadApp();
  }

  authenticate = (token) => {
    const provider = firebase.auth.FacebookAuthProvider
    const credential = provider.credential(token);
    return firebase.auth().signInWithCredential(credential);
  };

_goHome = (user) => {
  const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'Home', params: { user } })],
  });
  this.props.navigation.dispatch(resetAction);
};

  loadApp = async () => {
    //firebase.auth().signOut();
    firebase.auth().onAuthStateChanged((auth) => {
      if (auth) {
        this.firebaseRef = firebase.database().ref('users');
        this.firebaseRef.child(auth.uid).on('value', (snap) => {
          const user = firebase.auth().currentUser;
          if (user != null) {
            this.firebaseRef.child(auth.uid).off('value');
            this._goHome(user);
          }
        });
      } else {
        this.setState({ showSpinner: false });
        this.props.navigation.navigate('Login');
      }
    });
  }

  render() {
    return (
      <ImageBackground source={require('./images/fondo.png')} style={styles.container}>
        <ActivityIndicator />
      </ImageBackground>
    );
  }
}

First of all, you can't return two Views in your render, you need to return only one View that contains both Views — Vencovsky
Second, you need to provide how this.props.user is comming, because if ageRangeValue is undefined, it's because of what is comming from props — Vencovsky
The distanceValue is working but the ageRangeValues not. they come from another page and the user uid is passed with the navigation options — Roberto C Dl Garza
What do you get when you console.log this.props.user.ageRange? — Jono

SmoggeR_js SmoggeR_js · Accepted Answer · 2019-03-29T15:09:35

Try it with constructor

export default class Profile extends Component {
  constructor(){
    super();
    this.state = {
      ageRangeValues: this.props.user.ageRange,
      distanceValue: [this.props.user.distance],
    };
  }

  render() {

    const { ageRangeValues, distanceValue } = this.state;

    return (
      <View>
        <Slider
          min={5}
          max={100}
          values={distanceValue}
          onValuesChange={val => this.setState({ distanceValue: val })}
          onValuesChangeFinish={val => this.updateUser('distance', val[0])}
        />
        <Slider
          min={18}
          max={70}
          values={ageRangeValues}
          onValuesChange={val => this.setState({ ageRangeValues: val })}
          onValuesChangeFinish={val => this.updateUser('ageRange', val)}
        />
      </View>
    );
  }

TypeError: undefined is not an object (evaluating 'const.join')

2 Answers