title: Mapbox data-driven styles for categorical data - how to match expression with array inputs?
body: <p>I have an application in which polygons are added to Mapbox layers dynamically. I'm using a match expression to style the polygon fills, but I'm having problems figuring out the syntax of the  expression with array inputs.</p>
  
  <p>Here's a quick example of what I'm trying to do: <a href="https://stackblitz.com/edit/angular-bpuswd?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-bpuswd?file=src%2Fapp%2Fapp.component.ts</a></p>
  
  <p>I have a layer with the feature property <code>states</code>. I want to associate each state with a different fill color, per <a href="https://docs.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/" rel="nofollow noreferrer">this official mapbox example for data-driven styles</a>:</p>
  
  <pre><code>// want to match New York to color #F0F and Pennsylvania to color #FF0
  const states = ['New York', 'Pennsylvania'];
  const colors = ['#F0F', '#FF0'];
  const statesAndColors = ['New York', '#F0F', 'Pennsylvania', '#FF0'];
  
  this.map.addLayer({
    id: 'states',
    type: 'fill',
     source: {
        type: 'geojson',
        data: POLYGONS,
     },
     paint: {
       // doesn't work
       'fill-color': ['match', ['string', ['get', 'state']], states, colors, '#AAAAAA']
  
       // also doesn't work
       // 'fill-color': ['match', ['string', ['get', 'state']], statesAndColors, '#AAAAAA']
  
       // below example works
       // 'fill-color': ['match', ['string', ['get', 'state']], 'New York', '#F0F', 'Pennsylvania', '#FF0', '#AAAAAA']
      }
  });
  </code></pre>
  
  <p>The <a href="https://docs.mapbox.com/mapbox-gl-js/style-spec/?size=n_10_n#expressions-match" rel="nofollow noreferrer">mapbox expression match</a> documentation states that you can use 'an array of literal values, whose values must be all strings or all numbers (e.g. [100, 101] or ["c", "b"]). The input matches if any of the values in the array matches, similar to the deprecated "in" operator.'</p>
  
  <p>But my examples above do not work like I would expect. How do I format the expression to read in these styles as arrays? (Note: This example application can use the direct matching just fine because the New York and Pennsylvania values are hardcoded, but my actual application has polygons uploaded dynamically, so they're unknown at runtime.)</p>