Passing onChange event from child to parent in React

Question

I want to pass the onChange from child to parent. I don't even know if that is the correct way of putting it. But here is my code. The code worked previously but I am trying to break down my code into smaller components and dealing with the errors. If you would like more code, I am happy to share. I am a bit new to React. I don't know what I am doing wrong. The error is basically that the function which takes the event isn't getting anything.

Parent:

        <Inputs hasInputs={hasInputs} onSubmit={this.handleSubmit} thoughtProp={this.state.thought} onChange={this.handleChange} />

Child:

import React from 'react'
import { Input } from '../Input.js'

export const Inputs = (props) => {
    return (
    <form className="flex-item-main form" onSubmit={props.onSubmit}>
        <ol>
            {props.thoughtProp.map((input, index) => (
            <Input type='text' onSubmit={props.onSubmit} key={index} value={input} onChange={(event) => props.onChange(event, index) } className='textInputs' />
            ))}
            { props.hasInputs ? (
            <input className='submitThoughts' type='submit' value='Submit Thought!' />
            ) : (
            null
            )}
        </ol>
    </form>
    )
}

could you please put the console.log in your onChange function and post what is getting you inside the onChange function in event. — Waheed Akhtar
– Waheed Akhtar, Commented Jun 11, 2020 at 22:28

soma iyappan · Accepted Answer · 2022-01-29 11:09:47Z

Change Parent Component State from Child using hooks in React

Child component holds the Input field and we are going to send the input field value to the Parent component. So let’s create the Parent component first.

Parent.js

import Child from "./Child";
   function Parent() {
        const [name, setName] = useState("");
        const [password, setPassword] = useState("");
    
        const onChangeName=(newValue)=>{
          setName(newValue);
        }
    
        const onChangePassword=(value)=>{
          setPassword(value);
        }
        // We pass a callback to Child
        return (
       <Child  onChangeName={onChangeName} onChangePassword={onChangePassword} />;
    )}

As you see that we set the onChange property to the Child component. Next step is to create the Child component.

Child.js

    function Child(props) {
           
 return(
 <input  onChange={(e)=>{props.onChangeName(e.target.value)}} />
 <input  onChange={(e)=>{props.onChangePassword(e.target.value)}} />
       )}

On the above codes, we have created function handleChange that will pass the value through props.onChange to our Parent component.

Ross · Accepted Answer · 2020-06-11 23:20:26Z

0

Where is the handleChange function? In your Input component, next to your onSubmit={props.onSubmit} you should have onChange={props.onChange}.

answered Jun 11, 2020 at 23:20

Ross

4663 silver badges7 bronze badges

Comments

Sennen Randika · Accepted Answer · 2020-06-12 03:33:55Z

0

To do this, you have to implement it as follows..

Parent:

<Inputs
  hasInputs={hasInputs}
  onSubmit={this.handleSubmit}
  thoughtProp={this.state.thought}
  onChange={(event, index) => this.handleChange(event, index)}
/>;

Child:

import React from 'react';
import { Input } from '../Input.js';

export const Inputs = (props) => {
  return (
    <form className="flex-item-main form" onSubmit={props.onSubmit}>
      <ol>
        {props.thoughtProp.map((input, index) => (
          <Input
            type="text"
            onSubmit={props.onSubmit}
            key={index}
            value={input}
            onChange={(event, index) => props.onChange(event, index)}
            className="textInputs"
          />
        ))}
        {props.hasInputs ? (
          <input
            className="submitThoughts"
            type="submit"
            value="Submit Thought!"
          />
        ) : null}
      </ol>
    </form>
  );
};

answered Jun 12, 2020 at 3:33

Sennen Randika

1,6763 gold badges19 silver badges35 bronze badges

1 Comment

Andrew Lovato Over a year ago

I am so confused why it still isn't working. I made the above changes but now when I try to type something in the inputs, literally nothing shows up in the input. It's very strange

Collectives™ on Stack Overflow

Passing onChange event from child to parent in React

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related