I have a problem with passing a function that executes in parent to child component. Every time I try to invoke login-page I get this error Uncaught TypeError: handleChanged is not a function. For me, it is impossible because I did a similar thing in this code in register-page-container, i.e. in the place where the user registers - everything works there. Not here.
login.js - component which passing function to child component with inputs.
import React from 'react'
import './css/signup.css'
import LoginFirstPage from './loginFirstPage';
export default class LoginIn extends React.Component {
constructor(props) {
super();
this.state = {
viewLogin: false,
step: 1,
phone: '',
password: '',
}
}
nextStep = () => {
const {step} = this.state;
this.setState({step: step+1});
}
handleChange = input => e => {
this.setState({[input]: e.target.value})
}
handleLogin = () => {
const phone = this.state.phone;
const password = this.state.password;
console.log(phone, password)
}
render(){
const {phone, password} = this.state;
const { step } = this.state;
const values = {phone, password}
switch(step){
case 1:
return(
<LoginFirstPage
nextStep={this.nextStep}
handleChanged={this.handleChange}
values={values}
/>
)
default:
}
}
}
loginFirstPage.js
import React from 'react'
import { IoLogoApple, IoLogoGoogle } from "react-icons/io5";
const LoginFirstPage = (nextStep, handleChanged, values) => {
return (
<div>
<div>
<div className='background-login'>
</div>
<div className='login-page-container'>
<div className='login-page-content'>
<h1 className='login-page-title'>Zaloguj się</h1>
<div className='social-media-buttons1'>
<button className='google-button1' type='button'><IoLogoGoogle></IoLogoGoogle> Zaloguj się przy użyciu Google</button>
<button className='apple-button1' type='button'><IoLogoApple></IoLogoApple> Zaloguj się przy użyciu Apple</button>
<br>
</br>
<input type='text' onChange={handleChanged('phone')} value={values.phone} required autoComplete='true'></input>
</div>
</div>
</div>
</div>
</div>
)
}
export default LoginFirstPage