I have the following child component:
class SignIn extends React.Component {
constructor(props) {
super(props);
this.onClick = this.handleClick.bind(this);
this.state = {
email: '',
password: ''
};
}
handleClick = () => {
this.props.onClick(this.state.email, this.state.password);
}
handleEmailChange = (e) => {
this.setState({email: e.target.value});
}
handlePasswordChange = (e) => {
this.setState({password: e.target.value});
}
render() {
return (
...
...
);
}
}
Now from the parent I have the following component:
class App extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
email: "",
password: ""
}
}
handleClick(e, p, request) {
request();
}
render() {
const { email, password } = this.state;
console.log('render', email, password); // here I see the right state after click
return (
{}}>
{(request, result) => {
const { data, loading, error, called } = result;
if(!called) {
return this.handleClick(e, p, request)} />;
}
if(error) {
return
Error
;
}
if(loading) {
return
Loading...
;
}
...
return
Mutation processed
;
}}
);
}
}
What I wanted to achieve is separate handler after button click and initiate mutation send after some logic. However, this way variables(email, password) are always sent empty to the network. If I put request directly into handle, then it works.
How can I have a handler outside of render function to initiate mutation request with correct variable values? I would also very much like to know why this construction doesn't work and variables are empty.
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
