My onChange function is not being passed down to child

S. Schenk

I'm building a higher component where field input is grouped together with some other components. I'm trying to pass down my onChange function to the child component so it can change the state with the new input. all the other props are passed fine and I can see the using chrome dev tools, but even though I can see the onChange function if I console.log the props on the child, it is not present on the form control component which ultimately creates the input text field.

Here is the code, you can notice in the form render the FormGroup which is not using the higher InputFieldGroup component:

higher_component.js

import React from 'react'
import * as FormGroup from 'react-bootstrap/lib/FormGroup'
import * as ControlLabel from 'react-bootstrap/lib/ControlLabel'
import * as FormControl from 'react-bootstrap/lib/FormControl'

export const InputFieldGroup = (props) =>
  <FormGroup
    controlId={props.controlId}
    validationState={props.validationState()}>
    <ControlLabel>{props.controlLabel}</ControlLabel>
    {console.log(props)} {/* I CAN SEE THE ONCHANGE FUNCTION HERE */}
    <FormControl
      type={props.type}
      name={props.name}
      value={props.value}
      placeholder={props.placeholder}
      onChange={props.handleChange}
    />
    <FormControl.Feedback />
  </FormGroup>

form.js

export default class RequestQuote extends Component {
  ...Some other class methods and stuff

  handleTextChange = (e) => {
    this.setState({ [e.target.name]: e.target.value })
  }

  render() {
    return(
      <form>

        <InputFieldGroup 
          controlId='email'
          validationState={this.emailValidationState}
          controlLabel='email'
          type='text'
          name='email'
          value={this.state.email}
          placeholder='Enter Business Email'
          onChange={this.handleTextChange}
        />
      {/* When I don't use the higher component the onchange works fine */}
        <FormGroup>
          <ControlLabel>Name</ControlLabel>
          <FormControl
            type='text'
            name='name'
            value={this.state.name}
            placeholder='Enter Name'
            onChange={this.handleTextChange}
          />
            <FormControl.Feedback />
        </FormGroup>
      </form>
    )
  }
}

Why isn't the onChange function being passed to the child input?

Kerry Gougeon

Because it is undefined! In fact you give

onChange={this.handleTextChange}

to the components as a props, if you want to call it do

props.onChange

and not

props.handleChange

otherwise, change the variable onChange={js} to handleChange={js}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

My React function being passed down as props is not being invoked

react child callback not being executed after being passed down twice

Parameters of my function in React child component are not being passed to the parent component's function. Why is this happening?

Why is my search function not being passed?

Why is nothing being passed to my overloaded function?

Why are my props not being passed to my child component?

Prop not being passed to Child

PropTypes for functions being passed down

Why isn't the state being passed down to child here (TypeScript/React/SPFX)

What is the "instance" being passed to the to_representation function of my ListSerializer?

Why aren't the values from my directive being passed into the function?

Flutter: Why is my function passed to `StatelessWidget` not is not being executed?

Flutter: Why is my custom function passed to a `StatelessWidget` object not being executed?

Why is a function being passed in?

Component's onChange function being passed the last parameter value when the ReactJS components are rendered from an array

React props are concatenating when being passed down

"It looks like you've wrapped styled() around your React component (Hero), but the className prop is not being passed down to a child."?

React passing onChange event down to child component

Multiprocessing on a list being passed to a function

What argument is being passed to this function?

User input not being passed to function

React - Ajax data not being passed into Child Component

Destructing properties passed to child function

Why don't I have to specify that the result of a fortran function is being passed by value to my C++ program?

Why are my meteor settings not being passed to the application?

Why is my array being passed with an incorrect size?

Why is Context not being passed to my HOC

What is the hidden argument being passed to my `MethodType`?

Why is my input not being passed into the if statements?