Связанные селекты, как очистить при смене?

Question

[Владимир]

Есть база в база автомобилей в json, я смог настроить селекты что бы при смене бренда автомобиля подтягивались модели, но при смене бренда не очищаются модели.

Фрагмент базы:

{  
   "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"
  ],

А это то что я смог сделать:

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

Как мне с помощью useEffect сбрасывать содержимое селекта модели автомобиля при смене бренда?

Answer 1

[Ne7Le4Der]

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

Если я вас правильно понял

Comments

[Владимир]

Спасибо, попробую.