ReactJS - problem with passing function and paramerts to child

Viewed 11

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
0 Answers
Related