Mapping a nested array from JSON in react with a dropdown list

Question

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.

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 !

here is a snippet of the JSON file 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"
      ]
    }
  ]

my 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) => {
    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>

Abhishek Kulkarni · Accepted Answer · 2020-03-21 12:25:15Z

1

Try this and just apply a if condition in your map for the second dropdown:

    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>
)

answered Mar 21, 2020 at 12:25

Abhishek Kulkarni

1,7671 gold badge8 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

EatenApplee Over a year ago

Thank you so much ! Such little addition made the difference. I cannot quite seem to understand why did the if condition fix it, can you open it up a little for me ?

Abhishek Kulkarni Over a year ago

That’s because if you want your selected car brand models you need to filter it from the json array and then only get the particular models from that brand , you were initially printing everything .

EatenApplee Over a year ago

I get that part but i meant the if-condition didn't change anything in the actual map-function, that is what's puzzling me

Jatin Parmar · Accepted Answer · 2020-03-21 12:27:43Z

0

you should handle car selection this way

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

and you should render car model list of selected car as

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>
                   })

}

hope this will help!

answered Mar 21, 2020 at 12:27

Jatin Parmar

2,9596 gold badges22 silver badges34 bronze badges

Collectives™ on Stack Overflow

Mapping a nested array from JSON in react with a dropdown list

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related