marp: true
# Lifting State
Copyright By PowCoder代写 加微信 powcoder
Sometimes, you’ll want to share data with a sibling component.
### Example: An e-commerce app with search
### Example: An e-commerce app with search
const App = () => {
const Header = () => {
const [searchTerm, setSearchTerm] = useState(“”);
const MainContent = () => {
{/* how do I access `searchTerm`? */}
Search results for {searchTerm}
By _lifting state up_ to a parent or grandparent, we can pass that data around via props.
# Exercise
Lift state up
const App = () => {
const Header = () => {
const [username, setUsername] = useState(“”);
const [password, setPassword] = useState(“”);
const [user, setUser] = useState(null);
onSubmit={() => {
logInUser(username, password).then((user) => {
setUser(user);
label=”Password”
type=”password”
value={password}
handleChange={setPassword}
const WelcomeBack = () => {
return
;
const App = () => {
const SearchBar = () => {
const [searchTerm, setSearchTerm] = useState(“”);
onSubmit={() => {
fetchSearchResults(searchTerm).then((results) => console.log(results));
label=”Search for an item:”
value={searchTerm}
handleChange={setSearchTerm}
const Main = () => {
const SearchResults = () => {
return searchResults.map((result) => (