app.js

import React, { useState, useEffect } from 'react';

import {
  Layout,
  Form,
  Input,
  Radio,
  Select,
  Card
} from "antd";

const makes = [
  {
    value: 'honda',
    label: 'Honda',
  },
  {
    value: 'subaru',
    label: 'Subaru',
  },
];

const models = {
  honda: [
    {
      value: 'accord',
      label: 'Accord',
    },
    {
      value: 'civic',
      label: 'Civic',
    }
  ],
  subaru: [
    {
      value: 'outback',
      label: 'Outback',
    },
    {
      value: 'legacy',
      label: 'Legacy',
    }
  ]
};

const {Content} = Layout;

const FormWrapper = ({ onSubmit }) => {
  const [form] = Form.useForm();
  const [make, setMake] = useState('');
  const [model, setModel] = useState('');

  const handleMakeChange = (value) => {
    setMake(value);
    setModel('');
  };

  useEffect(() => {
    if (make && models[make]) {
      form.setFields(
        [{
          name: 'model',
          value: undefined,
          touched: false 
        }]
      );
    }
  }, [make, form]);

  const onFinish = (values) => {
    onSubmit(values);
  };

  return (
    <div style={{justifyContent: 'center', alignItems: 'center'}}>

      <Card title="Asset Info">
      <Form layout="vertical" form={form} onFinish={onFinish}>
        
        <Form.Item
          label="Condition"
          name="condition"
          initialValue="new"
        >
          <Radio.Group>
            <Radio value="new">New</Radio>
            <Radio value="used">Used</Radio>
          </Radio.Group>
        </Form.Item>
            
        <Form.Item
          label="Year"
          name="year"
        >
          <Input />
        </Form.Item>

        <Form.Item label="Car Make">
          <Select
            value={make}
            onChange={handleMakeChange}
            options={makes}
          />
        </Form.Item>

        <Form.Item label="Car Model">
          <Select
            value={model}
            onChange={(model) => setModel(model)}
            disabled={!models[make]}
            options={models[make] || []}
          />
        </Form.Item>

        <Form.Item>
          <button type="submit">Submit</button>
        </Form.Item>
      </Form>
      </Card>
    </div>
  );
};

const App = () => {
  
  const handleSubmit = (values) => {
    console.log('Form values:', values);
  };

  return (
    <Layout>
      <Content style={{ padding: '50px' }}>
        <FormWrapper onSubmit={handleSubmit}/>
      </Content>
    </Layout>
  );
};

export default App;