Keskitaso🔧 Refaktorointi

Prop drillingin korjaus Context API:lla

Korvaa prop drilling React Context API:lla.

Prompti

Refaktoroi prop drilling pois käyttäen React Context API:ta.

Koodi:
[KOODI]

Propsit jotka siirtyvät usean tason läpi:
[PROPSIT]

Vaatimukset:
- Context Provider -komponentti
- Custom hook contextille
- TypeScript-tyypit
- Oletusarvot

Säilytä sama toiminnallisuus.

Suomenkieliset vinkit

Voit sekoittaa suomea ja englantia — teknisiä termejä ei tarvitse kääntää
Suomenkieliset promptit toimivat hyvin Claude- ja GPT-4-malleissa
Voit pyytää AI:ta selittämään koodia suomeksi oppimista varten

Muuttujat

Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:

[KOODI]
[PROPSIT]

Esimerkki

Täytetty prompti

Refaktoroi prop drilling pois käyttäen React Context API:ta.

Koodi:
function App() {
  const [user, setUser] = useState(null);
  return <Layout user={user} setUser={setUser} />;
}

function Layout({ user, setUser }) {
  return <Sidebar user={user} setUser={setUser} />;
}

function Sidebar({ user, setUser }) {
  return <UserMenu user={user} setUser={setUser} />;
}

function UserMenu({ user, setUser }) {
  return user ? <span>{user.name}</span> : <button onClick={() => setUser({name: 'User'})}>Login</button>;
}

Propsit: user, setUser

Vaatimukset: Context, custom hook, TypeScript.