can't passing function to React child component

Question

i got a problem when i try to pass a function to child component inside it always show a message notify that "renderTextField is not defined"

here is my code.

Form Container

const renderTextField = props => (
  <TextField hintText={props.label}
    floatingLabelText={props.label}
    errorText={props.touched && props.error}
    {...props}
  />
)

class LoginPage extends React.Component {

  constructor(props) {
    super(props);
    this.processForm = this.processForm.bind(this);
  }

  processForm(data) {
    console.log(data);
  }

  /* Render the component. */
  render() {  
    console.log(renderTextField);
    return (
      <LoginForm
        submitData={this.processForm}
        renderTextfield={renderTextField}
      />
    );
  }

}

Form Child Component

   class LoginForm extends React.Component{

       constructor(props) {
        super(props);
       }

      render(){
        const { handleSubmit, pristine, reset, submitting, submitData, renderTextField } = this.props;

          return(
            <Card className="container">
              <form onSubmit={handleSubmit(submitData)}>
                <h2 className="card-heading">Login</h2>

                <div className="field-line">
                  <Field name="email" component={renderTextField} label="Email"/>
                </div>
        </form>
        </Card>
      )
  }
};

It produce error like this in LoginForm page :

Uncaught ReferenceError: renderTextField is not defined

i do console.log(renderTextField) too in parent/container form, it show :

function renderTextField(props) { return _react3.default.createElement(_reduxFormMaterialUi.TextField, _extends({ hintText: props.label, floatingLabelText: props.label, errorText: props.touc…

Answer 1

You're not passing the function to LoginForm correctly

renderTextfield={renderTextField} should be renderTextField={renderTextField}