title: Mapping a nested array from JSON in react with a dropdown list
body: <p>I'm making a form in my fathers website where you can submit information about your car and then you'll get an email later giving you a price offer.</p>
  
  <p>Anyways, inside the form there is a select list where you can select your car make, and then there is another select list that gives the models of the selected car brand. I have a JSON file that includes car brands and their respective models, but i cannot seem to get it functioning the way i want it to. In this version of the code, the second dropdown list shows me all of the cars models in the list, and not just the selected car brands models because after several tries i cannot figure out the right code. Any help would be greatly appreciated !</p>
  
  <p>here is a snippet of the JSON file carModels.json</p>
  
  <pre><code>    [
      {
        "brand": "Acura",
        "models": [
          "2.2CL",
          "2.3CL",
          "3.0CL",
          "3.2CL",
          "ILX",
          "Integra",
          "Legend",
          "MDX",
          "NSX",
          "RDX",
          "3.5 RL",
          "RL",
          "RSX",
          "SLX",
          "2.5TL",
          "3.2TL",
          "TL",
          "TSX",
          "Vigor",
          "ZDX"
        ]
      },
      {
        "brand": "Alfa Romeo",
        "models": [
          "164",
          "8C Competizione",
          "GTV-6",
          "Milano",
          "Spider"
        ]
      },
      {
        "brand": "AMC",
        "models": [
          "Alliance",
          "Concord",
          "Eagle",
          "Encore",
          "Spirit"
        ]
      },
      {
        "brand": "Aston Martin",
        "models": [
          "DB7",
          "DB9",
          "DBS",
          "Lagonda",
          "Rapide",
          "V12 Vantage",
          "V8 Vantage",
          "Vanquish",
          "Virage"
        ]
      },
      {
        "brand": "Audi",
        "models": [
          "100",
          "200",
          "4000",
          "5000",
          "80",
          "90",
          "A3",
          "A4",
          "A5",
          "A6",
          "A7",
          "A8",
          "allroad",
          "Cabriolet",
          "Coupe",
          "Q3",
          "Q5",
          "Q7",
          "Quattro",
          "R8",
          "RS 4",
          "RS 5",
          "RS 6",
          "S4",
          "S5",
          "S6",
          "S7",
          "S8",
          "TT",
          "TT RS",
          "TTS",
          "V8 Quattro"
        ]
      },
      {
        "brand": "Avanti",
        "models": [
          "Convertible",
          "Coupe",
          "Sedan"
        ]
      },
      {
        "brand": "Bentley",
        "models": [
          "Arnage",
          "Azure",
          "Brooklands",
          "Continental",
          "Corniche",
          "Eight",
          "Mulsanne",
          "Turbo R"
        ]
      }
    ]
  
  </code></pre>
  
  <p>my code</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Col, Button, Form, FormGroup, Label, Input, FormText, Row } from 'reactstrap'
  
  import carModels from "./carModels"
  
  
  export class carousel extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        carMake: ''
      }
    }
  
    handleChange = (event) =&gt; {
      this.setState({carMake: this.state.carMake = event.target.value });
      console.log(this.state.carMake)
    };
  
  
    render() {
  
  
      return (
                  &lt;div&gt;
                     &lt;Input className="inputBrand" type="select" name="carbrand" id="carBrand" onChange={this.handleChange}&gt;
                       &lt;option&gt;Choose brand&lt;/option&gt;
                       {carModels.map((carBrand, index) =&gt; {
                         return &lt;option&gt;{carBrand.brand}&lt;/option&gt;
                       })}
                    &lt;/Input&gt;
                    &lt;Input className="inputBrand" type="select" name="carmodel" id="carModel"&gt;
                       &lt;option&gt;Choose model&lt;/option&gt;
                       {carModels.map((carBrand, index) =&gt; {
                         return carBrand.models.map((brandModels, index) =&gt; {
                            return &lt;option&gt;{brandModels}&lt;/option&gt;
                         })
                       })}
                    &lt;/Input&gt;
                  &lt;/div&gt;
  
  </code></pre>