Skip to content

Instantly share code, notes, and snippets.

@Frodigo
Last active Jun 23, 2021
Embed
What would you like to do?
React prop drilling example
import React, { useState } from "react";
export const Account = () => {
const [user, setUser] = useState({ name: "Marcin", country: "Poland" });
<AccountDetails user={user} setUser={setUser} />;
};
export const EditAccount = (props) => {
const { user, setUser } = props;
return (
<form>
<input
type="text"
value={user.name}
onChange={(e) =>
setUser({
...user,
name: e.target.value,
})
}
/>
<input
type="text"
value={user.country}
onChange={(e) =>
setUser({
...user,
country: e.target.value,
})
}
/>
</form>
);
};
export const AccountDetails = props => {
const { user, setUser } = props;
return (
<>
<h1>{user.name}</h1>
<p>Country: {user.country}</p>
<EditAccount user={user} setUser={setUser}></EditAccount>
</>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment