Error in self-invoking function inside render when updating React state

Question

I am writing a React Native application using react-native-maps. On my map, I am dynamically populating a number of circles by using the map method inside a self-invoking function. See the following code located in the component's render function:

{
  (() => {
    return this.state.mapviewPolygon.map(circle => (
      <MapView.Circle
        center={circle.coordinates}
        key={circle.key}
      />
    ))
  })()
}

This works fine on initial rendering. I later update this.state.mapviewPolygon based on where the user clicks on the map, with the intention that the circles will re-render based on the new set of coordinates.

However, when this self-invoking function fires, I receive the error TypeError: undefined is not a function (near '..._this2.state.mapviewPolygon.map...'), which doesn't tell me much. Likewise, the stack trace is of negligible help.

What is happening? How do I get the circles to properly re-render?

EDIT 1: See my entire render function below:

render() {

    return (
      <View style={styles.container}>

        <MapView
          style={styles.map}
          showUserLocation
          followUserLocation
          loadingEnabled
          region={this.getMapRegion()}
          scrollEnabled = {this.state.mapviewScroll}
          onPress= { (e) => {
                let stateCopy = Object.assign({}, this.state.mapviewPolygon);
                // circleKey is a variable containing the index of 
                // the item in the state array to change
                stateCopy[circleKey].coordinates = e.nativeEvent.coordinate;
                this.setState({mapviewPolygon: stateCopy});
              }
            }
        >

         {
            this.state.mapviewPolygon.map(circle => 
                  <MapView.Circle
                    center={circle.coordinates}
                    key={circle.key}
                    radius={50}
                    fillColor={'#4286f4'}
                  />
                )
          }

          <MapView.Polygon
            coordinates={this.getPolygonCoords()}
            fillColor="rgba(0, 200, 0, 0.5)"
            strokeColor="rgba(0,0,0,0.5)"
            strokeWidth={2}
          />
        </MapView>

      </View>
    );
  }

Just try using { this.state.mapviewPolygon.map(circle => <MapView .../> ) } in your render function. — Dan
– Dan, Commented Aug 22, 2018 at 13:29
Done. (Please note that I went ahead and implemented your suggestion in the earlier comment as it is more concise and leads to the same performance I've had so far.) — 223seneca
– 223seneca, Commented Aug 22, 2018 at 13:42
try to log and see the value of this.state.mapviewPolygon in the render function. map function is a property of an Array. If your this.state.mapviewPolygon is undefined or null then this Error will come. Just make sure that value is an Array — cheekujha
– cheekujha, Commented Aug 22, 2018 at 15:01

Michael Cheng · Accepted Answer · 2018-08-22 16:55:35Z

1

You’re changing mapviewPolygon from what is probably an array into an object when you do:

let stateCopy = Object.assign({}, this.state.mapviewPolygon);

map isn’t a method of object; hence the error. If you want to make a copy of an array, use something like:

let stateCopy = [...this.state.mapviewPolygon];

Or

let stateCopy = this.state.mapviewPolygon.slice();

answered Aug 22, 2018 at 16:55

Michael Cheng

10.7k6 gold badges54 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

223seneca Over a year ago

I'll go ahead and give this to you since it's correct. I'll leave my own answer up as well for others' reference.

223seneca · Accepted Answer · 2018-08-22 16:50:06Z

0

The answer turned out to be that stateCopy is an incorrect type. Since this.state.mapviewPolygon is an array of objects, using Object.assign was an error. So I replaced this:

let stateCopy = Object.assign({}, this.state.mapviewPolygon);

With this:

let stateCopy = [];
  for (let i in this.state.mapviewPolygon) {
    stateCopy.push(this.state.mapviewPolygon[i]);
};

This works because map is now receiving an array instead of an object.

answered Aug 22, 2018 at 16:50

223seneca

1,1764 gold badges22 silver badges49 bronze badges

Collectives™ on Stack Overflow

Error in self-invoking function inside render when updating React state

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related