React States and Props

App.js

import React, { Component } from 'react';
import './App.css';

import BrandsApi from './api/brand'
import ModelsApi from './api/model'

class App extends Component {
  state = {
    brands: [],
    models: [],
  }

  componentDidMount() {
    this.setState({ brands: BrandsApi.getAll() })
  }

  onChangeBrand(e) {
    let brand_id = e.target.value
    this.setState({ brand_id, models: ModelsApi.getAllByBrandId(brand_id) })
  }

  render() {
    return (
      <div className="form">
        <div>Make:</div>
        <select value={this.state.brand_id} onChange={this.onChangeBrand.bind(this)}>
          {this.state.brands.map((brand, index) => <option key={index} value={brand.id}>{brand.name}</option>)}
        </select>

        <div>Model:</div>
        <select value={this.state.model_id} onChange={e => this.setState({ model_id: e.target.value })}>
          {this.state.models.map((model, index) => <option key={index} value={model.id}>{model.name}</option>)}
        </select>
      </div>
    );
  }
}