Cannot read property 'props' of undefined in functional component

Question

So i have the following react functional component:

import React from "react";
import LNSelect from "../LNSelect/LNSelect";
import { CountryRegionData } from "react-country-region-selector";

const parsed = CountryRegionData.map(
  ([country_name, country_code, cities]) => ({
    country_name,
    country_code,
    cities: cities
      .split("|")
      .map(cityData => cityData.split("~"))
      .map(([city_name, city_code]) => ({ city_name, city_code }))
  })
);
const regions = parsed
  .find(country => country.country_name === this.props.country)
  .cities.map(({ city_name, city_code }) => ({
    label: city_name,
    value: city_code
  }));

const LNSelectRegion = props => {
  return <LNSelect options={regions} {...props} />;
};

export default LNSelectRegion;

Basically im using a package to get countries and their cities/city codes, then finding a specific country passed as a prop country and mapping it's cities into a label and value array for use on a selector component I have, the problem with this code is that on the .find line, I'm getting the error Cannot read property 'props' of undefined , I'd like to fix this and I'd also like to set a default value for the country prop incase it's empty ( if this.props.country === "" {this.props.country = "United States} ), how can I do this?

Answer 1

1) In functional component you can get the props using props not this.props .

2) You can get your props only inside your funtional component LNSelectRegion .

So I just re-write your code here on that standard, hopefully it will works

import React from "react";
import LNSelect from "../LNSelect/LNSelect";
import { CountryRegionData } from "react-country-region-selector";

const parsed = CountryRegionData.map(
  ([country_name, country_code, cities]) => ({
    country_name,
    country_code,
    cities: cities
      .split("|")
      .map(cityData => cityData.split("~"))
      .map(([city_name, city_code]) => ({ city_name, city_code }))
  })
);

const LNSelectRegion = props => {

const regions = parsed
  .find(country => country.country_name === props.country)
  .cities.map(({ city_name, city_code }) => ({
    label: city_name,
    value: city_code
  }));

  return <LNSelect options={regions} {...props} />;
};

export default LNSelectRegion;

Answer 2

you can not use this in functional components, so your code should be:

const regions = parsed
  .find(country => country.country_name === props.country)
  .cities.map(({ city_name, city_code }) => ({
    label: city_name,
    value: city_code
  }));

Also you need function with passed props parameter sorrounding this block

const YourComponent = (props) => {
    // your code above
}

Answer 3

The const regions function should be written inside the functional component to which the props are passed.

// Functional component
const Child = props => {
const regions = parsed
  .find(country => country.country_name === props.country)
  .cities.map(({ city_name, city_code }) => ({
    label: city_name,
    value: city_code
  }));
  return (
    <div></div>
  )
}

Answer 4

Cause this in this.props.country is undefined. Try passing prop to get regions

const getRegions = (country) => parsed
  .find(country => country.country_name === country)
  .cities.map(({ city_name, city_code }) => ({
    label: city_name,
    value: city_code
  }));

const LNSelectRegion = props => {
  return <LNSelect options={getRegions(props.country)} {...props} />;
};

Answer 5

Your parsed and regions consts are outside actual component and you can't access props there. Also there is no 'this' in functional components. Take a look at code below:

import React from "react";
import LNSelect from "../LNSelect/LNSelect";
import { CountryRegionData } from "react-country-region-selector";

const parsed = CountryRegionData.map(
  ([country_name, country_code, cities]) => ({
    country_name,
    country_code,
    cities: cities
      .split("|")
      .map(cityData => cityData.split("~"))
      .map(([city_name, city_code]) => ({ city_name, city_code }))
  })
);
const getRegions = (countryFromProps) => parsed
  .find(country => country.country_name === countryFromProps)
  .cities.map(({ city_name, city_code }) => ({
    label: city_name,
    value: city_code
  }));

const LNSelectRegion = (props) => {
  return <LNSelect options={getRegions(props.country)} {...props} />;
};

LNSelectRegion.defaultProps = {
    country: "United States"    
}

export default LNSelectRegion;