Hello everyone!

React newbie here. I'm seeking your help because I am currently struggling with a feature. I managed to display a list of markers from an external file (list of 3 museums in London) and added popups to them. But now I'd like to filter them with 3 buttons: let's say button1 displays marker 1, etc.

I have no clue on how to perform such thing: my first thought would be to add some specific characteristic to each of them in my Data.js file but then I do not know how to retrieve this info and based my buttons on this filter in my main component, could you please tell me how to do it? Any hints?

Here is what I've done so far:

// Main document
import React, {PureComponent} from "react";
import ReactDOM from "react-dom";
import ReactMapGL, {Marker, Popup} from "react-map-gl";
import "./index.css";
import Data from "./Data.js";


const MAPBOX_TOKEN = "Mapbox_token";


class Mapp extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            viewport: {
                latitude: 51.50985,
                longitude: -0.11892,
                zoom: 12,
            },
            markers: Data,
            selectedMarker: null
        };
    }

    _renderMarkers() {
        return (
            this.state.markers.map(marker => (
                <Marker
                    key={marker.id}
                    longitude={marker.longitude}
                    latitude={marker.latitude}>
                        <button 
                            className="marker-btn"
                            onClick={event => {
                                event.preventDefault();
                                this.setState({selectedMarker: marker})
                            }}>
                            <img 
                                className="marker-btn"
                                src="location-icon.svg"
                                alt="location Icon"
                            />
                        </button>
                </Marker>
            ))
        )
    }

    _renderPopup() {
        return(
            this.state.selectedMarker && (
                <Popup
                    longitude={this.state.selectedMarker.longitude}
                    latitude={this.state.selectedMarker.latitude}
                    onClose={() => {this.setState({selectedMarker: null})}}
                    offsetLeft={22.5}
                >
                    <div>
                        <h3>Name: {this.state.selectedMarker.site_name}</h3>
                        <h4>Website: {this.state.selectedMarker.website}</h4>
                    </div>
                </Popup>
            )
        )
    }

    render() {
        return (
            <div className="App">
                <div className="Map">
                    <ReactMapGL
                        {...this.state.viewport}
                            width="100vw"
                            height="100vh"
                            mapStyle="mapbox://styles/mapbox/streets-v11"
                            onViewportChange={viewport => this.setState({viewport})}
                            mapboxApiAccessToken={MAPBOX_TOKEN}
                        >

                            {this._renderMarkers()}
                            {this._renderPopup()}

                    </ReactMapGL>
                </div>
            </div>
        );
    }
}

document.body.style.margin = 0;
ReactDOM.render(
    <Mapp />, 
    document.getElementById("root")
)

The file containing the information of my markers:

//Data.js
const Data = [
  {
    "id": 1,
    "latitude": 51.5206436238135,
    "longitude": -0.12869802265875,
    "site_name": "Museum of Writing",
    "website": "http://www.museumofwriting.co.uk/"
  },
  {
    "id": 2,
    "latitude": 51.5252701073731,
    "longitude": -0.1216462226263,
    "site_name": "The Foundling Museum",
    "website": "http://www.foundlingmuseum.org.uk/"
  },
  {
    "id": 3,
    "latitude": 51.5484218889309,
    "longitude": -0.17724635343509,
    "site_name": "Freud Museum",
    "website": "https://www.freud.org.uk/"
  }
]

export default Data

Thank you very much in advance !!

Hello everyone!

React newbie here. I'm seeking your help because I am currently struggling with a feature. I managed to display a list of markers from an external file (list of 3 museums in London) and added popups to them. But now I'd like to filter them with 3 buttons: let's say button1 displays marker 1, etc.

I have no clue on how to perform such thing: my first thought would be to add some specific characteristic to each of them in my Data.js
file but then I do not know how to retrieve this info and based my buttons on this filter in my main component, could you please tell me how to do it? Any hints?

Here is what I've done so far:

// Main document
import React, {PureComponent} from "react";
import ReactDOM from "react-dom";
import ReactMapGL, {Marker, Popup} from "react-map-gl";
import "./index.css";
import Data from "./Data.js";


const MAPBOX_TOKEN = "Mapbox_token";


class Mapp extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            viewport: {
                latitude: 51.50985,
                longitude: -0.11892,
                zoom: 12,
            },
            markers: Data,
            selectedMarker: null
        };
    }

    _renderMarkers() {
        return (
            this.state.markers.map(marker => (
                <Marker
                    key={marker.id}
                    longitude={marker.longitude}
                    latitude={marker.latitude}>
                        <button 
                            className="marker-btn"
                            onClick={event => {
                                event.preventDefault();
                                this.setState({selectedMarker: marker})
                            }}>
                            <img 
                                className="marker-btn"
                                src="location-icon.svg"
                                alt="location Icon"
                            />
                        </button>
                </Marker>
            ))
        )
    }

    _renderPopup() {
        return(
            this.state.selectedMarker && (
                <Popup
                    longitude={this.state.selectedMarker.longitude}
                    latitude={this.state.selectedMarker.latitude}
                    onClose={() => {this.setState({selectedMarker: null})}}
                    offsetLeft={22.5}
                >
                    <div>
                        <h3>Name: {this.state.selectedMarker.site_name}</h3>
                        <h4>Website: {this.state.selectedMarker.website}</h4>
                    </div>
                </Popup>
            )
        )
    }

    render() {
        return (
            <div className="App">
                <div className="Map">
                    <ReactMapGL
                        {...this.state.viewport}
                            width="100vw"
                            height="100vh"
                            mapStyle="mapbox://styles/mapbox/streets-v11"
                            onViewportChange={viewport => this.setState({viewport})}
                            mapboxApiAccessToken={MAPBOX_TOKEN}
                        >

                            {this._renderMarkers()}
                            {this._renderPopup()}

                    </ReactMapGL>
                </div>
            </div>
        );
    }
}

document.body.style.margin = 0;
ReactDOM.render(
    <Mapp />, 
    document.getElementById("root")
)

The file containing the information about my markers:

//Data.js
const Data = [
  {
    "id": 1,
    "latitude": 51.5206436238135,
    "longitude": -0.12869802265875,
    "site_name": "Museum of Writing",
    "website": "http://www.museumofwriting.co.uk/"
  },
  {
    "id": 2,
    "latitude": 51.5252701073731,
    "longitude": -0.1216462226263,
    "site_name": "The Foundling Museum",
    "website": "http://www.foundlingmuseum.org.uk/"
  },
  {
    "id": 3,
    "latitude": 51.5484218889309,
    "longitude": -0.17724635343509,
    "site_name": "Freud Museum",
    "website": "https://www.freud.org.uk/"
  }
]

export default Data

Thak you in advance! Cheeeeeers