Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 142188

Trying to use dictionary look up to dynamically map options in a select drop down

$
0
0

I have a react component that includes a dictionary of key/value pairs representing US state abbreviations for the key and their full name as the value like:

const states = {
  AL: "Alabama",
  AK: "Alaska",
  AZ: "Arizona",
  AR: "Arkansas",
  CA: "California"
}

I also have an API response that sends back a state as part of a nested address object as an abbreviation. So for California, the API returns CA

I'm trying to check the API response against my object and dynamically map only the US states that match what's in the dictionary to options in a select dropdown but I'm getting errors saying Expected an assignment or function call and instead saw an expression for my initial function.

I've included the dictionary look up function as well as my component below.

Dictionary lookup - causing the errors

const activeStates = props.locations.map(x => {abbr: x.address.state; name: states[x.address.state]});

React Component with select dropdown

<select>
  <option>
    {Object.entries(activeStates).map((name, abbreviation) => <option key={abbreviation} value={abbreviation}>{name}
  </option>
</select>

Viewing all articles
Browse latest Browse all 142188

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>