How to pass input value from child to parent component react

Question

I'm learning React and I'm building a table component with inputs to filter the data. My structure is:

FilterBar
- FilterInput

I want my FilterBar able to store the FilterInput values in the class state in this way ==> this.state = {inputsVal: ["input1value", "input2value", "", ...]}.
I dynamic build an input component for each header (attribute in my database). So when I write in one of those components i want to capture the new value and the position of this component in order to refresh the FilterBar state array. I success on getting the position(index) of the component but not the value. I dont know how to achieve this. Here are my components:

class FilterBar extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        inputs: Array(props.headers.length).fill("")
    };
    this.updateFilters = this.updateFilters.bind(this);
}

updateFilters(i) {
    console.log(i);   //==>I can see the index of the input when it changesbut i want also to see the new value
}

renderFilterInputs() {
    var filters = []
    for (let i=0; i < this.state.inputs.length; i++) {
        filters.push(<FilterInput key={i} filterApplied={this.state.inputs[i]} onChange={() => this.updateFilters(i)} />);
    }
    return filters;
}

render() {
    return (
      <tr className="filters-bar">
        {this.renderFilterInputs()}
      </tr>
    );
}

}
and here is FilterInput component

class FilterInput extends React.Component {
    render() {
        return (
            <td>
                <input type='text' className="form-control" defaultValue={this.props.filterApplied} onChange={() => this.props.onChange()} />
            </td>
        );
    }
}

Thank you

Dimitar Christoff · Accepted Answer · 2017-07-26 14:56:57Z

3

you need to change the FilterInput onChange= handler on the input:

<input onChange={event => this.props.onChange(event.target.value)} {...otherProps} />

obviously, design an APi contract between the two where you either pass the value or the event raw to the onChange handler and in the parent make sure you have:

<FilterInput onChange={this.updatefilters.bind(i)} />

make sure the updatefilters is bound to this first in your constructor.

answered Jul 26, 2017 at 14:56

Dimitar Christoff

26.1k8 gold badges53 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

guilleCM Over a year ago

Thank you, by this way I'm getting the value but I lost the index of the input <:( and it's important for me to track the value of the index!!

guilleCM Over a year ago

I answer myself, I just added a new parameter in updateFilters function and pass it inside FilterInput onChange handler.

<input type='text' className="form-control" defaultValue={this.props.filterApplied} onChange={event => this.props.onChange(event.target.value, this.props.keyField)} />

and the function: updateFilters(val, i) { ..... }

Chris Cousins · Accepted Answer · 2017-07-26 14:55:06Z

1

Change the onChange as so:

filters.push(<FilterInput key={i} filterApplied={this.state.inputs[i]} onChange={(evt) => this.updateFilters(i, evt)} />);

Then change your updateFilters to get the value from the event now passed in:

updateFilters(i, evt) {
    const value = evt.target.value;
    ....
}

answered Jul 26, 2017 at 14:55

Chris Cousins

1,92211 silver badges15 bronze badges

1 Comment

guilleCM Over a year ago

By this way I'm getting Uncaught TypeError: Cannot read property 'target' of undefined in the function updateFilters. It seems not be working for me. Thank you anyways!

Collectives™ on Stack Overflow

How to pass input value from child to parent component react

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related