I'm still learning react native and I'm trying to retreive datas from API and return it as custom radio button but if I do call the API, I got this error:

null is not an object (evaluating 'this.props.activities.map')

 {this.props.activities.map((val, index) => {
    let { key, type, placeholder } = val;

    if (type === "selection") {
      var buttons = [];

      placeholder.forEach((e, index) => {
        var selectedButton = img.findButton(e, true);
        var normalButton = img.findButton(e);

        buttons.push(
          <RadioButton
            key={index}
            value={e}
            element={<Image source={selectedButton} />}
            selectedElement={<Image source={normalButton} />}
            onPress={() => this.changeSelection(key, e)}
            selected={this.state[key]["value"]}
          />
        );
      });

      var rows = [],
        columns = [];
      var i = 0;

      buttons.forEach((e, index) => {
        rows.push(e);
        i++;

        if (i === 2 || index === buttons.length - 1) {
          //max buttons per row
          i = 0;
          columns.push(
            <View key={index} style={{ flex: 1, flexDirection: "row" }}>
              {rows}
            </View>
          );
          rows = [];
          i = 0;
        }
      });

      return (
        <View key={key} style={{ flex: 1, margin: normalize(20) }}>
          {columns}
        </View>
      );
    }
  })}

I'm still learning react native and I'm trying to retreive datas from API and return it as custom radio button but if I do call the API, I got this error:

null is not an object (evaluating 'this.props.activities.map')

 {this.props.activities.map((val, index) => {
    let { key, type, placeholder } = val;

    if (type === "selection") {
      var buttons = [];

      placeholder.forEach((e, index) => {
        var selectedButton = img.findButton(e, true);
        var normalButton = img.findButton(e);

        buttons.push(
          <RadioButton
            key={index}
            value={e}
            element={<Image source={selectedButton} />}
            selectedElement={<Image source={normalButton} />}
            onPress={() => this.changeSelection(key, e)}
            selected={this.state[key]["value"]}
          />
        );
      });

      var rows = [],
        columns = [];
      var i = 0;

      buttons.forEach((e, index) => {
        rows.push(e);
        i++;

        if (i === 2 || index === buttons.length - 1) {
          //max buttons per row
          i = 0;
          columns.push(
            <View key={index} style={{ flex: 1, flexDirection: "row" }}>
              {rows}
            </View>
          );
          rows = [];
          i = 0;
        }
      });

      return (
        <View key={key} style={{ flex: 1, margin: normalize(20) }}>
          {columns}
        </View>
      );
    }
  })}

the 'this.props.activites' came from this

let initialState = {
    activities: null,

};

export default function mainReducer(state = initialState, action) {
    switch (action.type) {
        case t.RECEIVE_ACT:
            return Object.assign({}, state, { actReceived: true, activities: action.activities });
        case t.EMPTY_ACT:
            return Object.assign({}, state, { actReceived: false, activities: null });
        default:
            return state;
    }
}

I wonder how is it bees null

• javascript
• reactjs
• react-native

3 Answers 3

Initial state of activities is null. So until you get a response from your api React is rendering that part of your code with the null value. You can either give activities: [] as initial value or you can before your map function if its null or not such as

{this.props.activities && this.props.activities.map((val, index) => {...

If you are going to use activities: [] then you can still make a check before your map, altough it is optional but still good, such as;

{this.props.activities.length && this.props.activities.map((val, index) => {...

Where is this.props.activities ing from?

Is it asynchronous, as it appears that it is null at a certain point.

If you add the following line you should no longer see this error.

this.props.activities && this.props.activities.map(.....

Paul answer is a bulletproof but you can use default value too to avoid falsy values

YourComponent.defaultProps = {
    activities: []
}