---
# System prepended metadata

title: React--透過props傳送setstate至其他component
tags: [react, props]

---

# React--透過props傳送setstate至其他component
###### tags: `react` `props` 
在使用react寫登入介面時遇到的問題，送出帳密資訊之後如何透過usestate刷新頁面。

後來發現是我沒有傳送props到所有會通過的components。
```javascript=20
/*Login.js*/

const Login=(props)=>{/*接收props*/
  const {setCurrentPage} = props;/*從props取出setCurrentPage*/
  return(
    <main>
      <LoginHeader/>
      <LoginForm
      setCurrentPage={setCurrentPage}
      />
    </main>
  )
}

const Home = () => {
  const [currentPage, setCurrentPage] = useState('Login');
  return (
    <main>
      {currentPage === 'Login' && (<Login
      setCurrentPage={setCurrentPage} /*傳送setCurrentPage到Login*/
      />)}  
      <Footer/>
    </main>
  );
}
export default Home;
```

要讓`LoginForm`能夠調用`setCurrentPage`需要把`setCurrentPage`先傳送到`Login`才能引用。

```javascript=9
/*Login.js*/

const LoginForm=(props)=>{

    const {setCurrentPage} = props;
    function processFormData() {
        const Account = document.getElementById("Account");
        const Password = document.getElementById("Password")
    }

    return (
        <Container className="justify-content-md-center">
        <Button variant="primary" onClick={processFormData}>登入</Button> 
		</Container>
    );
  };
  
  export default LoginForm;
```

