Property is undefined when using 'map'

Question

I'm trying to create a search component that checks the JSON of the API(currently just a mock). The Component loads fine, but when I start to type into the search field, then the App crashes with the error "Uncaught (in promise) TypeError: Cannot read property of 'map' of undefined".

I've made sure that the fields are all the same. As mentioned the component loads correctly, but fails once the Suggestion is supposed to load. So, the problem is obviously in this file, but can't understand why it can't map the results.

Here is my Search Component:

// Imports

class Search extends Component {
    state = {
        query: '',
        results: []
    }

    getInfo = () => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(({data}) => {
                this.setState({
                    results: data.data
                })
            })
    }

    handleInputChange = () => {
        this.setState({
            query: this.search.value
        }, () => {
            if (this.state.query && this.state.query.length > 1) {
                if (this.state.query.length % 2 === 0) {
                    this.getInfo()
                }
            } else if (!this.state.query) {

            }
        })
    }

    render() {
        return (
            <form>
                <input
                    placeholder="Search for..."
                    ref={input => this.search = input}
                    onChange={this.handleInputChange}
                />
                <Suggestions results={this.state.results} />
            </form>
        );
    }
}
export default Search;

Then the Suggestions component used in the Search component:

import React from 'react';

const Suggestions = (props) => {
    const options = props.results.map(r => (
        <li key={r.id}>
            {r.name}
        </li>
    ))
    return <ul>{options}</ul>
}
export default Suggestions;

The ideal outcome would be for the Search to filter out based on the input.

Answer 1

Sometimes the most obvious answer is the correct one. If props.results is undefined, and its value comes from state.results then state.results must be undefined.

I tested your code, and as long as state.results was an array, everything worked hunky dory. I would check to make sure that data.data is really the right place to get your results from (maybe just data will do the trick?).

If the result legitimately is undefined at times, then check for that outcome and return an empty array:

getInfo = () => {
  axios.get('https://jsonplaceholder.typicode.com/users')
    .then(({data}) => {
       this.setState({
         results: data.data || [] // <-- now never undefined.
       })
    });
}