" null is not an object (evaluating 'this.state.array') "

Question

I'm trying to dynamically add a View component and some text containing an array once the button is pressed and I'm getting this "null is not an object" error

I tried following some other posts, but none of them actually worked. I tried to follow this code: Programmatically add a component in React Native

in order to dynamically add that View component, but it gives me the error in the title.

This is my code:

import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  Button,
} from 'react-native-elements';

let index = 0;
let limit = 6;
let numbersCount = 0;
let maxNumber = 49;
let minNumber = 1;
let numbers = [];


export default class App extends Component {

  getInitialState() {
    return { array: [] }
  }
  _onPressOut() {
    let temp = index ++
    this.state.array.push(temp)
    this.setState({
        array: this.state.array
    })
  }

  lotoNumber() {
    for (let numbersCount = 0; numbersCount < limit + 1; numbersCount++) {
      numbers.push(Math.floor(Math.random() * (maxNumber - minNumber + 1))) + minNumber;
    }
    return numbers = numbers.join(", ");
  };

  render() {
    let Arr = this.state.array.map((a, i) => {
      return <View style={styles.sectionContainer}><Text style={styles.sectionTitle}>{numbers}</Text><Text style={styles.sectionDescription}>Acestea sunt numerele tale. Te rugam sa astepti pana DUMINICA la extragere sau LUNI cand rezultatele vor fi publice pe internet</Text></View>
    })

    return (
    <>
      <StatusBar backgroundColor="green" barStyle="light-content" translucent={true} />
      <SafeAreaView>
      <Header
      placement="center"
      centerComponent={{ text: 'Numere Loto', style: { color: '#fff', fontSize: 23 } }}
      containerStyle={{
        backgroundColor: 'green',
        justifyContent: 'center',
        }}
      />

          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Introducere</Text>
              <Text style={styles.sectionDescription}>
              Salut! Bun venit pe aplicatia <Text style={styles.highlight}>Numere Loto</Text>. Aceasta aplicatie
              este destinata jucatorilor la loto si vor sa bage variante de numere aleatorii pe bilet!
              </Text>
            </View>
            <View style={styles.sectionContainer}>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Cum se foloseste aplicatia?</Text>
              <Text style={styles.sectionDescription}>
                Pentru a genera numere, apasa pe butonul de mai jos si asteapta putin pentru a vedea ce numere ai luat, apoi le poti
                baga pe bilet si sa astepti pana DUMINICA cand se va face extragerea sau pana LUNI cand rezultatele vor fi afisate pe
                internet.
              </Text>
            </View>
            { Arr }
            <View style={styles.sectionContainer}>
            <Button
            title="Solid Button"
            buttonStyle={{
              backgroundColor: "green"
              }}
            onPress={ () => this._onPressOut() }
            />
            </View>
          </View>
      </SafeAreaView>
    </>
    );
  }
}




const styles = StyleSheet.create({
  body: {
    backgroundColor: '#ffffff',
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: '#000000',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: '#a9a9a9',
  },
  highlight: {
    fontWeight: '700',
    color: '#464646',
  },
  footer: {
    color: '#a9a9a9',
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

It should output some random numbers, as you can see in the lotoNumber() function. I'm new to react-native so if I made any other mistakes in the code please correct me :)

Answer 1

With ES6 classes, state is initially set in the constructor:

class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { 
        array: []
      };
    }
}

See the docs here: https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state