How to pass data between 3 components on React?

Question

Hey I am pretty noob at React. This props and State stuff are eating my head. Anyway, my problem is that, I have 3 Componenets "LoginForm", "InputField", "SubmitButton"

What I need is, I want to pass "Username" and "Password" details to SubmitButton Component when the SubmitButton clicked. I tried and succeded to pass data from InputField to LoginForm whenever the inputfield value changes, but couldn't do the same to " SubmitButton " Component.

Thanks in Advance:)

The code is here as follows.

//LOGING FORM COMPONENT
class LoginForm extends React.Component {

    eventHandler = function (data) {
        console.log(data)
    }  

    render() {
        return (

            <div>
                <InputField onChange={this.eventHandler}/>
                <SubmitButton/>
            </div>
        )
    }
}

export default LoginForm;

//INPUT FIELD COMPONENT

class InputField extends React.Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:''
        };
        this.handleChange=this.handleChange.bind(this)
    }


handleChange = e => {
    this.setState({ [e.target.name]: e.target.value }, () => {
      if (this.props.onChange) {
        this.props.onChange(this.state);
      }
    })
  };

    render() {
        return (
            <div>
                <div>
                    <input name='username' onChange={this.handleChange}></input>

                </div>
                <div>
                    <input name='password' type='password' onChange={this.handleChange}></input>

                </div>


            </div>

        )
    }
}

export default InputField;

//SUBMIT BUTTON COMPONENT

class Submit_Button extends React.Component {

    constructor(props){
        super(props);
        this.loginBtn=this.loginBtn.bind(this)

    }
    loginBtn = function (data) {

        //Empty Because, dont know what to code xD
    }  

    render() {
        return (
            <div>
                <button onClick={this.loginBtn}>
                    Login</button>
                <svg class="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd" />
                </svg>
            </div>

        )


    }
}
export default Submit_Button;

SOLVED

class LoginForm extends React.Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:''
        };

    }

    eventHandler = (data) =>{
        console.log(data)
        this.setState({
            username:data.username,
            password:data.password

    },
    console.log(this.state.username)) 

    }  

    render() {
        return (

            <div>
                <InputField onChange={this.eventHandler}/>
                <SubmitButton username={this.state.username} password={this.state.password}/>
            </div>
        )
    }
}

export default LoginForm;


class InputField extends React.Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:''
        };
        this.handleChange=this.handleChange.bind(this)
    }


handleChange = e => {
    this.setState({ [e.target.name]: e.target.value }, () => {
      if (this.props.onChange) {
        this.props.onChange(this.state);

      }
    },

    )
  };

    render() {
        return (
            <div>
                <div>
                    <input name='username' onChange={this.handleChange}></input>

                </div>
                <div>
                    <input name='password' type='password' onChange={this.handleChange}></input>

                </div>


            </div>

        )
    }
}

export default InputField;


class Submit_Button extends React.Component {

    constructor(props){
        super(props);
        this.loginBtn=this.loginBtn.bind(this)

    }
    loginBtn = function (data) {

        console.log( this.props.username, this.props.password)
    }  

    render() {
        return (
            <div>
                <button onClick={this.loginBtn}>
                    Login</button>
                <svg className="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fillRule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clipRule="evenodd" />
                </svg>
            </div>

        )


    }
}
export default Submit_Button;

Answer 1

Basically, it is a good idea to pass data from one child to another through their parent.

in this case, you can move the state from InputField to LoginForm and connect inputs to the state through InputField's props and make them controlled components. (you can read more about controlled components from here )

then you can simply pass data from LoginForm's state to SubmitButton through its props.