React Downshift: how to connect to an array that is on the network

I'm writing a small interface to the application with a map and displaying addresses with coordinates and hints in input, everything is as it should be(everything is like uber). Please, who is familiar with the Downshift plugin, which gives hints from input to input.

There is a component code for this Downshift:

import React from 'react'
import styled from 'styled-components'
import Downshift from 'downshift';


function getStreetList (callback){

  let requestToStreets = new Request(
    'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address',
    {
      method: 'POST',
      headers: new Headers({
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': 'Token 1e4cb9c1bbeff03271767fb32b42cfb6721e8927',
      }),
      body: JSON.stringify({
        'query': 'Санкт-Петербург',
      })
    }
  );

  fetch(requestToStreets)
      .then(function(response) { return response.json(); })
      .then(function(data){callback(data.suggestions)});

  }

let streetsList;

getStreetList((streets) => {
  streetsList = streets;
});


class SearchInput extends React.Component{

  render(){
  return (
    <DownshiftWrapper itemToString={item => (item ? item.value : '')}>
    {({
       getInputProps,
       getItemProps,
       getLabelProps,
       getMenuProps,
       isOpen,
       inputValue,
       highlightedIndex,
       selectedItem,
    }) =>(
     <div>
       <SearchInputWrapper {...getInputProps()} />
       <StreetList {...getMenuProps()}>
          {isOpen
            ? streetsList
                .filter(item => !inputValue || item.value.includes(inputValue))
                .map((item, index) => (
                  <li
                    {...getItemProps({
                      key: item,
                      index,
                      item,
                      style: {
                        borderBottomColor:
                          highlightedIndex === index ? '#EFB8AF' : '#EEE',
                      },
                    })}
                  >
                    <span>streetsList.value</span>
                  <span>{streetsList.data.region}</span> //МЕСТО ОШИБКИ!!

                  </li>
                ))
            : null}
        </StreetList>
      </div>
    )}
    </DownshiftWrapper>
  )}
}

export default SearchInput

Saved you from the styled component styles(tag names changed due to this plugin). In general, Downshift allows you to output from an array that I received with a fetch request, the value property. If anything the object I requested looks something like this:

{
    "suggestions": [
        {
            "value": "г Москва, ул Хабаровская",
            "unrestricted_value": "г Москва, ул Хабаровская",
            "data": {
                "postal_code": null,
                "country": "Россия",
                "country_iso_code": "RU",
                "federal_district": null,
                "region_fias_id": "0c5b2444-70a0-4932-980c-b4dc0d3f02b5",
                "region_kladr_id": "7700000000000",
                "region_iso_code": "RU-MOW",
                "region_with_type": "г Москва",
                "region_type": "г",
                "region_type_full": "город",
                "region": "Москва",
                "area_fias_id": null,
                "area_kladr_id": null,
                "area_with_type": null,
                "area_type": null,
                "area_type_full": null,
                "area": null,
                "city_fias_id": "0c5b2444-70a0-4932-980c-b4dc0d3f02b5",
                "city_kladr_id": "7700000000000",
                "city_with_type": "г Москва",
                "city_type": "г",
                "city_type_full": "город",
                "city": "Москва",
                "city_area": null,
                "city_district_fias_id": null,
                "city_district_kladr_id": null,
                "city_district_with_type": null,
                "city_district_type": null,
                "city_district_type_full": null,
                "city_district": null,
                "settlement_fias_id": null,
                "settlement_kladr_id": null,
                "settlement_with_type": null,
                "settlement_type": null,
                "settlement_type_full": null,
                "settlement": null,
                "street_fias_id": "32fcb102-2a50-44c9-a00e-806420f448ea",
                "street_kladr_id": "77000000000713400",
                "street_with_type": "ул Хабаровская",
                "street_type": "ул",
                "street_type_full": "улица",
                "street": "Хабаровская",
                "house_fias_id": null,
                "house_kladr_id": null,
                "house_type": null,
                "house_type_full": null,
                "house": null,
                "block_type": null,
                "block_type_full": null,
                "block": null,
                "flat_type": null,
                "flat_type_full": null,
                "flat": null,
                "flat_area": null,
                "square_meter_price": null,
                "flat_price": null,
                "postal_box": null,
                "fias_id": "32fcb102-2a50-44c9-a00e-806420f448ea",
                "fias_code": null,
                "fias_level": "7",
                "fias_actuality_state": null,
                "kladr_id": "77000000000713400",
                "geoname_id": null,
                "capital_marker": "0",
                "okato": "45263564000",
                "oktmo": "45305000",
                "tax_office": "7718",
                "tax_office_legal": "7718",
                "timezone": null,
                "geo_lat": null,
                "geo_lon": null,
                "beltway_hit": null,
                "beltway_distance": null,
                "metro": null,
                "qc_geo": null,
                "qc_complete": null,
                "qc_house": null,
                "history_values": [
                    "ул Черненко"
                ],
                "unparsed_parts": null,
                "source": null,
                "qc": null
            }
        },
        ...
    ]
}

Question: Downshift shows me the value of {streetsList.value}, but refuses to show {streetsList.data.region}, giving the error-Cannot read property 'region' of undefined. But data.region is in the response. Help me how to split the response if downshift sees nothing but a huge data.value response.

Author: Nurai, 2020-01-21

1 answers

The answer was simple, you just need to take the values from the item function map:

<span>{item.data.street}</span>
<span>{item.data.region}</span>
 0
Author: Nurai, 2020-01-22 12:54:14