Отображение вложенного массива из JSON в ответ на выпадающий список

Question

Я делаю форму на веб-сайте моего отца, где вы можете отправить информацию о своем автомобиле, а затем вы получите электронное письмо с предложением цены.

В любом случае, внутри формы есть выберите список, в котором вы можете выбрать марку вашего автомобиля, а затем есть другой список выбора, в котором представлены модели выбранной марки автомобиля. У меня есть файл JSON, который включает марки автомобилей и их соответствующие модели, но я не могу заставить его работать так, как я хочу. В этой версии кода во втором раскрывающемся списке отображаются все модели автомобилей из списка, а не только выбранные модели марок автомобилей, поскольку после нескольких попыток я не могу определить правильный код. Любая помощь будет принята с благодарностью!

Вот фрагмент файла JSON файла carModels. json

    [
    {
      "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"
      ]
    }
  ]

мой код

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) => {
    this.setState({carMake: this.state.carMake = event.target.value });
    console.log(this.state.carMake)
  };


  render() {


    return (
                <div>
                   <Input className="inputBrand" type="select" name="carbrand" id="carBrand" onChange={this.handleChange}>
                     <option>Choose brand</option>
                     {carModels.map((carBrand, index) => {
                       return <option>{carBrand.brand}</option>
                     })}
                  </Input>
                  <Input className="inputBrand" type="select" name="carmodel" id="carModel">
                     <option>Choose model</option>
                     {carModels.map((carBrand, index) => {
                       return carBrand.models.map((brandModels, index) => {
                          return <option>{brandModels}</option>
                       })
                     })}
                  </Input>
                </div>

Answer 1

вы должны обработать выбор машины таким образом

 handleChange = (event) => {
      //we are storing selected index, instead of model name
      this.setState({carMake:event.target.selectedIndex });
     console.log(this.state.carMake)
    };

и вы должны отобразить список моделей выбранных автомобилей как

renderCarModles=()=>{
  if(this.state.carMake=='')return <option>select car </option>;
   //using selected index to fetch models
   let carModels=carModels[this.state.carMake].models;
    return carModels.map((brandModels, index) => {
                      return <option>{brandModels}</option>
                   })

}

надеюсь, это поможет!

Answer 2

Попробуйте это и просто примените условие if на вашей карте для второго выпадающего списка:

    return (
                <div>
                   <Input className="inputBrand" type="select" name="carbrand" id="carBrand" onChange={this.handleChange}>
                     <option>Choose brand</option>
                     {carModels.map((carBrand, index) => {
                       return <option>{carBrand.brand}</option>
                     })}
                  </Input>
                  <Input className="inputBrand" type="select" name="carmodel" id="carModel">
                     <option>Choose model</option>
                     {carModels.map((carBrand, index) => {
                          if(carBrand.brand == this.state.carMake){
                              return carBrand.models.map((brandModels, index) => {
                                  return <option>{brandModels}</option>
                              })
                           }
                      })}
                  </Input>
                </div>
)