problems while using array.map for null entry in react

Question

I am trying to map the location array but I am unable to do so. I've tried so many stuff in order to map the null object in the array but failed. what mistake am I doing here? if I use a for loop instead of map function then i can do it but i am stuck with the map thing. ...

import React from "react";
import { List, ListItem } from "@material-ui/core";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./styles.css";
import Icon from "../src/icon.png";
import shadow from "../src/shadow.png";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      location: [
        {
          id: 1,
          machine: 1,
          lat: 51.503,
          lng: -0.091
        },

        null
      ],
      center: [51.505, -0.091],
      zoom: 11,
      marker: null
    };
    this.clickAction = this.clickAction.bind(this);
  }

  Icon = L.icon({
    iconUrl: Icon,
    shadowUrl: shadow,
    iconSize: [38, 50],
    shadowSize: [50, 64],
    iconAnchor: [22, 34], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
  });

  openPopUp(marker, id) {
    if (marker && marker.leafletElement) {
      marker.leafletElement.openPopup(id);
    }
  }

  clickAction(id, lat, lng) {
    this.setState({ marker: id, zoom: 16, center: [lat, lng] });
  }

  render() {
    console.log(this.state);
    return (
      <>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {this.state.location &&
            this.state.location.map(location => {
              return location !== null ? (
                <Marker
                  position={[location?.lat, location?.lng]}
                  icon={this.Icon}
                  ref={this.openPopUp(location?.id)}
                >
                  <Popup> {location?.id} </Popup>
                </Marker>
              ) : null;
            })}
        </Map>

        {
          <List style={{ width: "20%", float: "left" }}>
            {this.state.location &&
              this.state.location.map(({ id, machine, lat, lng }) => {
                return (
                  <ListItem
                    key={id}
                    button
                    onClick={() => {
                      this.clickAction(id, lat, lng);
                    }}
                  >
                    Id {id} <br />
                    machine {machine}
                  </ListItem>
                );
              })}
          </List>
        }
      </>
    );
  }
}

... sample code https://codesandbox.io/s/gallant-star-m42qe?file=/src/App.js:0-2858

Vivek Doshi · Accepted Answer · 2020-06-17 11:33:18Z

1

You are passing null in array, hence the error :

this.state = {
  location: [
    {
      id: 1,
      machine: 1,
      lat: 51.503,
      lng: -0.091
    },
    null // <---- Remove this
  ],

If you want to keep null, then change this line

this.state.location.map(({ id, machine, lat, lng }) => {

to, filter out all null entries before mapping it :

this.state.location.filter(l => l).map(({ id, machine, lat, lng }) => {

WORKING DEMO :

edited Jun 17, 2020 at 11:33

answered Jun 17, 2020 at 11:28

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

4 Comments

death stranding Over a year ago

i've different objects within an array. so this object is null

death stranding Over a year ago

in the real application, an object can have null entries or the object can be null as a whole, it is for this scenario

death stranding Over a year ago

thanks, this is working though I also tried something similar in my application but it was giving error. I will try this to my main application

Vivek Doshi Over a year ago

@deathstranding, you can check the demo, you cal filter all the entries which are blank or null or which is not location, this way you will not get errors.

Clarity · Accepted Answer · 2020-06-17 11:33:38Z

1

The issue is in your second map statement where you destructure the location object inside the map, which will result in error for null objects. To fix this, you can filter out the null and other falsy locations before mapping them:

 this.state.location.filter(location => location).map(/* ... */)

You can also use a Boolean shorthand to achieve that:

this.state.location.filter(Boolean).map(/* ... */)

answered Jun 17, 2020 at 11:33

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Collectives™ on Stack Overflow

problems while using array.map for null entry in react

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related