Calling a function within a component class

Question

I have the following variable, registerForm, that has been assigned an array of components. This variable has been defined outside of the Panel class.

const registerForm = [
    <div key={0} style={styles.form.inlineContainer}>
        ...
        <TextField
            floatingLabelText="First Name"
            hintText="First Name"
            floatingLabelFixed={true}
            style={styles.form.inlineContainer.spacing}
            underlineFocusStyle={styles.form.field.borderColor}
            floatingLabelFocusStyle={styles.form.field.color}
            floatingLabelStyle={styles.form.field.fontSize}
            onChange={(input) => this.handleInput(input)}
        />
        ...
    </div>
];

I then have a class which has a function handleInput. When something is typed into the text field, the following error is produced: _this.handleInput is not a function

export default class Panel extends React.Component {
    constructor() {
        super();

        this.state = {
            panel: 0
        }
    }

    handlePanelChange = (panel) => {
        this.setState({
            panel: panel
        });
    };

    handleInput = (input) => {
        console.log(input);
    };

    render() {
        const panel = this.state.panel;
        const form = (panel === 0) ? signInForm : registerForm;

        return (
            {form}
        );
    }
}

If possible, how can I get the onChange event to call handleInput?

create `registerForm` inside the render function, otherwise what is `this`? — elclanrs, Mar 21 '18 at 00:59
you can use handleInput inside Panel and pass it down to registerFrom or move registerForm inside Panel so this way it recognizes "this". Also try using arrow function if you do move it inside Panel — iceveda06, Mar 21 '18 at 04:34

score 0 · Answer 1 · answered Mar 21 '18 at 01:14

Since it's an array that will render a UI element, how about creating a component for that? And then you can just pass your method in by props as React tutorial points out:

class Square extends React.Component {
render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
}

Calling a function within a component class

1 Answers1