React передача данных между компонентами
Я пытаюсь реализовать функционал, когда пользователь логинится в дочернем элементе, в родительский передавалось значение. Как вызвать функцию без прорисовки кнопки в дочернем элементе ?
Родительский элемент
class App extends Component {
constructor(props) {
super(props);
this.state = {
isLogging: false
};
this.logInHandler = this.logInHandler.bind(this);
}
logInHandler() {
this.setState({ isLogging: !this.state.isLogging });
}
render() {
return (
<div>
<Layout>
{/* <Route path='/' exact component={Logging} /> */}
<Route path='/' exact component={() => <Logging logInHandler={this.state.logInHandler} />} />
{ this.state.isLogging ?
<Route path='/user_desk' exact component={UserMain} />
: null }
Дочерний элемент
class Logging extends Component{
loginHandler(e) {
const element = document.getElementById("redirect");
e.preventDefault();
const us_name = document.getElementById("username").value;
const us_email = document.getElementById("useremail").value;
const us_pas = document.getElementById("userpass").value;
const API_URL = '/rest_auth/login/';
axios.post(API_URL, { username: us_name, password: us_pas, email: us_email}, {withCredentials: true})
.then((response) => {
if (response.status === 200 || response.status === '200' ) {
console.log(this.props); // тут выдаёт ошибку (ниже)
window.location.href = '/user_desk';
}
}, (error) => {
console.log('INVALID CRUDENTIOALS', error);
});
}
render() {
return(
<div className='loggin-main min-vh-100 p-0'>
{console.log(this.props)} // сдесь ошибки нету
// далее вызывается функция loginHandler
Ошибка
Unhandled Rejection (TypeError): Cannot read property 'props' of undefined
Как вызвать функцию родителя logInHandler в дочерней функции ?