child component using onChange(), update parent component

Question

I have three components, one controller, and two childrens of this controller. For this problem we need a controller and one children (his name is : Input.js)

So, I expose the problem. In my Input.js I call the onChange() method and updated inside of this file the state and in my controller I passing a props for recover the the state in my children.

But I have an error this.props.myName is not a function

Please you can take a look of this code inside :

** Input.js **

import React, { Component, Fragment } from "react";

class Input extends Component {

  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      email: "",
      password: ""
    };

  _handleChange(pEvt) {
    if (pEvt.target.type === "email" && pEvt.target.value.length >= 6) {
      this.setState({
        email: pEvt.target.value
      });
    } else {
      this.setState({
        password: pEvt.target.value
      });
    }
  }
  
  render() {
    const { type, placeholder } = this.props;
    return (
      <Fragment>
        <div className="form__group">
          <input
            className="form__input"
            type={type}
            placeholder={placeholder}
            ref={input => (this.refInput = input)}
            onChange={pEvt => {
              this._handleChange(pEvt);
            }}
          />
        </div>
      </Fragment>
    );
  }
}

export default Input;

** SignInUp.js (Controller) **

import React, { Component } from "react";
import Header from "./../Header/Header";
import Input from "./../Input/Input";
import Submit from "./../Input/Submit";
import "./_SignInUp.scss";

class sign extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: []
    };
  }

  _inputValue = email => {
    this.setState({
      input: [...this.state.input, email]
    });
  };

  render() {
    return (
      <div className="sign">
        <Header />
        <form className="form">
          <Input
            inputValue={this._inputValue}
            type="email"
            placeholder="Email"
          />
          <Input type="password" placeholder="Password" />
          <div className="form__submit">
            <Submit name="Sign in" to="/profile" />
            <Submit name="Sign Up" to="/" />
          </div>
        </form>
      </div>
    );
  }
}

export default sign;

I couldnt figure out from your code where are you using inputValue, It doesnt show up in the Input component. Maybe you missed some code? — Matan Bobi, Mar 07 '18 at 15:21
Possible duplicate of [Pass props to parent component in React.js](https://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js) — Gabriel Bleu, Mar 07 '18 at 15:22

score 1 · Accepted Answer · answered Mar 07 '18 at 20:15

In your implmentation, the Sign class doesn't know the value of of Input classes.
Input class can be implemented without state.
The setState shouldn't use itself to update, you can use prevState, but it doesn't need in this case. https://reactjs.org/docs/react-component.html#setstate
Fragement doesn't do anything, so it doesn't need to be there, since it already has a div wrapper.

There is an example based on your code:

class Input extends Component {
  _handleChange = event => {
    this.props.onChang(event.target.value);
  }

  render() {
    const { type, placeholder, value } = this.props;
    return (
      <div className="form__group">
        <input
          className="form__input"
          type={type}
          placeholder={placeholder}
          onChange={this._handleChange}
          value={value}
        />
      </div>
    );
  }
}

class SighUp extends Component {
  state = {
    email: '',
    password: '',
  };

  render() {
    return (
        <form>
          <Input
            type="email"
            placeholder="Email"
            value={this.state.email}
            onChang={val => { this.setState({ email: val }); }}
          />
          <Input
            type="password"
            placeholder="Password"
            value={this.state.password}
            onChang={val => { this.setState({ password: val }); }}
          />
          <button onClick={e => { e.preventDefault(); console.log(this.state); }}>Console log</button>
        </form>
    );
  }
}

There is the codesandbox for this demo: https://codesandbox.io/s/k01mvwroq5

Does this demo help?

Thanks for your answer :) Enjoy ! – KolaCaine Mar 08 '18 at 10:35 — KolaCaine, Mar 08 '18 at 10:35

child component using onChange(), update parent component

1 Answers1