Update two input fields in different components with redux

Question

I am trying to get the following behavior in react using redux. I have two side by side components both have a <input> textfield that displays the same value. When I edit either of the field's, I want to dispatch an action and have redux store update the state of my app in both components

Exactly like asana app.

when I edit the field on left it updates the field on the right side as well

and when i edit the field on right, It updates the text field on left as well

I can only get it working one way and not both ways. I am using the value prop of the <input> textfield and keeping a state variable to update the <input> textfield as described in react-docs. I have state variable in one component and other one directly listens to the props.

I tried using the defaultValue prop if <input> textfield but it runs into other problems of not updating value when switching between different items

ref: sitepoint.com/… the difference in my case, my <input>'s are present in separate components (files/classes) — Irfanlone
– Irfanlone, Commented Nov 2, 2016 at 19:39

Rose Robertson · Accepted Answer · 2016-11-02 02:09:21Z

1

Hard to answer this without seeing your code, but based on what you're saying it sounds like you are storing one input's value on state?

If I want a value to be linked to a global store, I wouldn't store it on state. I'd do something like this (a bit pseudocody but hopefully you get the idea!)

onChange: function (e) {
  this.props.dispatch(updateName(e.target.value));
},

render: function() {
  return (
    <input value={this.props.name} onChange={this.onChange} />
  );
}

The dispatch causes an update to the global store which then cascades that updated name value back down to the react component you are currently typing in, as well as the other input elsewhere that is populated by the same data.

answered Nov 2, 2016 at 2:09

Rose Robertson

1,2567 silver badges14 bronze badges

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

4 Comments

Irfanlone Over a year ago

That would not work as it becomes an un controlled component. Read this facebook.github.io/react/docs/forms.html anyway, my problem arises when i have two of them in separate components and linked to the same value

Rose Robertson Over a year ago

It's still a controlled component as it is receiving a value as a prop and the value is being manipulated onChange higher-up the chain.

Irfanlone Over a year ago

Maybe you are right. I have tried what you suggested but that still doesn't fix my problem, It only updates on the input fields.

Rose Robertson Over a year ago

It's hard to provide further insight into why it might not be working without seeing some code.

Collectives™ on Stack Overflow

Update two input fields in different components with redux

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related