Related selects, how to clear on change?

Question

React

There is a base in the car database in json, I was able to set up the selects so that when the car brand changes, the models are pulled up, but when the brand is changed, the models are not cleared.

Base fragment:

{  
   "AC": [
   "378 GT Zagato",
   "Ace",
   "Aceca",
   "Cobra"
  ],
  "Acura": [
   "CL",
   "CSX",
   "EL",
   "ILX",
   "Integra",
   "Legend",
   "MDX",
   "NSX",
   "RDX",
   "RL",
   "RLX",
   "RSX",
   "SLX",
   "TL",
   "TLX",
   "TSX",
   "ZDX"
  ],

And this is what I was able to do:

import { Select} from 'antd';
import { Option } from 'antd/lib/mentions';
import { useEffect, useState } from 'react';
import Cars from './Cars.json';


interface Icarlist{
  [key:string]:string[];
}
const Tables2 = () => {

const[brand, setBrand] = useState<string>("")
const[models, setModels] = useState<string>("")

const carlist: Icarlist={...Cars}

useEffect(()=>{

},;

  return (
    <div style={{ textAlign: 'center',marginBottom: 20 }}>
      <>
       <Select  
       style={{ width: 240 }}        
       placeholder="Select brand" 
       onChange={setBrand}>
       {Object.keys(Cars).map(brend => (
       <Option key={brend}>{brend}</Option>
        ))}
       </Select>
       
     <Select 
     style={{ width: 240 }} 
     placeholder="Select model" 
     onChange={setModels}>
     {carlist[brand]?.map(models => (
     <Option key={models}>{models}</Option>
        ))}        
       </Select>
       </>
    </div>
  );
  }

How can I use useEffect to reset the contents of the car model select when changing the brand?

Answer 1

useEffect(()=>{
    setModels("");
}, [brand]);

If I understand you correctly