Cannot control state properly

Question

I have 3 components: App, Map and ListPlaces. In ListPlaces component, when a user types something in the input element, I want to change the state(markers's state) in App.js to show only related markers on the map.

Edit: When I edit my typo, the error was disappeared. However, I think the logic is still wrong. Because when I write something in the input element, markers array would be 0 immediately. And of course, all markers are disappeared.

More Explanation:

After componentDidMount, my markers array holds 7 items. And Map component takes this markers array and render markers on the map. However, I need to control my markers from ListPlaces component according to value of input element. So I put this: onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}} in onChange attribute of input element. (Omit the this.updateQuery, for now, you can focus on only changeMarkersHandler).

This changeMarkersHandler runs changeMarkers function in App.js, but I don't know why my marker arrays would be 0 immediately while changeMarkers function is working.

Note: I am using react-google-maps and I've omitted some code blocks which aren't related to question.

App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            places: [],
            markers: [],
            markerID: -1,
            newMarkers: []
        };
        this.changeMarkers = this.changeMarkers.bind(this);
    }

    componentDidMount() {
        fetch("api_url")
            .then(response => response.json())
            .then(data => {
                this.setState({
                    places: data.response.venues,
                    markers: data.response.venues
                });
            })
            .catch(error => {
                console.log("Someting went wrong ", error);
            });
    }


    changeMarkers(value) {
        const newMarkers = this.state.markers.filter(
            place => place.name === value
        );
        this.setState({
            newMarkers : newMarkers,
            markers: newMarkers
        })
    }

    render() {
        return (
            <div className="App">
                <Map role="application"
                places={this.state.places}
                markers={this.state.markers}
                openInfoHandler={this.openInfo}
                closeInfoHandler={this.closeInfo}
                markerID={this.state.markerID}
                googleMapURL="url_here" />
                <ListPlaces changeMarkersHandler={this.changeMarkers} />
            </div>
        );
    }
}

ListPlaces.js

import React, { Component } from "react";
import escapeRegExp from "escape-string-regexp";

class ListPlaces extends Component {
    state = {
        searchQuery: ""
    };

    updateQuery = query => {
        this.setState({ searchQuery: query});
    };

    render() {
        const { toggleListHandler, locations, openInfoHandler, changeMarkersHandler} = this.props;
        let showLocations;
        if (this.state.searchQuery) {
            const match = new RegExp(escapeRegExp(this.state.searchQuery), "i");
            showLocations = locations.filter(location =>match.test(location.name));
        } else {
            showLocations = locations;
        }

        return (
            <div>
                <aside>
                    <h2>Restaurants</h2>
                    <nav>
                        <div className="search-area">
                            <input
                                className="search-input"
                                type="text"
                                placeholder="Search Restaurant"
                                value={this.state.searchQuery}
                                onChange={e => {this.updateQuery(e.target.value); changeMarkersHandler(e.target.value)}}
                            />
                        </div>
                        <ul>
                            {showLocations.map(location => {
                                return (
                                    <li
                                        key={location.id}
                                        onClick={e =>
                                            openInfoHandler(e, location.id)
                                        }
                                    >
                                        {location.name}
                                    </li>
                                );
                            })}
                        </ul>
                    </nav>
                    <p>some text</p>
                </aside>
                <a
                    onClick={toggleListHandler}
                    id="nav-toggle"
                    className="position"
                >
                    <span />
                </a>

            </div>
        );
    }
}

export default ListPlaces;

Answer 1

You have a typo in you constructor.

 this.changeMarkers(this.changeMarkers.bind(this));

should be

 this.changeMarkers = this.changeMarkers.bind(this);