App.js

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

import SelectBrand from './components/SelectBrand'
import SelectModel from './components/SelectModel'

class App extends Component {
  state = {}

  render() {
    return (
      <div className="form">
        <SelectBrand 
          value={this.state.brand_id}
          onChange={brand_id => this.setState({ brand_id })}
          />

        <SelectModel
          value={this.state.model_id}
          onChange={model_id => this.setState({ model_id })} 
          brandId={this.state.brand_id} 
          />
      </div>
    );
  }
}

export default App;

SelectBrand.js

import React, { Component } from 'react';

import BrandsApi from '../api/brand'

export default class SelectBrand extends Component {
  state = {
    brands: []
  }

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

  render() {
    return (
      <div>
        <div>Brand:</div>
        <select value={this.props.value} onChange={e => this.props.onChange(e.target.value)}>
          {this.state.brands.map((brand, index) => <option key={index} value={brand.id}>{brand.name}</option>)}
        </select>
      </div>
    )
  }
}

SelectModel.js

import React, { Component } from 'react';

import ModelsApi from '../api/model'

export default class SelectModel extends Component {
  state = {
    models: []
  }

  componentWillUpdate(nextProps) {
    let brandId = nextProps.brandId
    let brandIdNow = this.props.brandId
    if(!!brandId && brandId != brandIdNow)
      this.setState({ models: ModelsApi.getAllByBrandId(brandId) })
  }

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