Input values are syncing up and I'd rather they not

Question

ChildComponent displays different fragments depending on the index passed in. This works fine, but if I have input element on multiple fragments and I put a value in one it gets automatically copied to the others. Why is this happening and how can I stop it?

const { Fragment } = React;

const fragments = (onChangeHandler) =>
  [
    <input type="text" id="screen1_input1" onChange={onChangeHandler} />,
    <input type="text" id="screen2_input1" onChange={onChangeHandler} />
  ];

const ChildComponent = ({ index, fragments }) => {
    const onChange = e => {
    const { target: {id, value} } = e;
    console.log(id, value);

        const newData = {
            ...contentData,
            [e.target.id]: e.target.value
        }
        setContentData(newData)
    };

  return (
    <Fragment>
      <h2 className="screens">{fragments(onChange)[index]}</h2>
    </Fragment>
  );
};

const ParentComponent = props => {
  return <ChildComponent index={1} fragments={fragments}/>;
};

ReactDOM.render(<ParentComponent />, document.getElementById("react"));

Can you show your onChangeHandler for your inputs? Looks like you are using the same state for both your input tags — Near, Mar 04 '21 at 08:18
@Near `onChangeHandler` is just `onChange` passed from `ChildComponent`. — Drew Reese, Mar 04 '21 at 08:19

codemonkey · Accepted Answer · 2021-03-04T08:23:31.387

3

Give them unique keys like so:

const fragments = (onChangeHandler) =>
  [
    <input key="key1" type="text" placeholder="input 1" id="screen1_input1" onChange={onChangeHandler} />,
    <input key="key2" type="text" placeholder="input 2" id="screen2_input1" onChange={onChangeHandler} />
  ];

Here a Sandbox to demonstrate it: https://codesandbox.io/s/keen-sun-vsk3e?file=/src/App.js:709-710

React uses the key prop to understand the component-to-DOM Element relation, which is then used for the reconciliation process. It is therefore very important that the key always remains unique, otherwise there is a good chance React will mix up the elements and mutate the incorrect one.

Reference: https://stackoverflow.com/a/43892905/1927991

edited Mar 04 '21 at 08:23

answered Mar 04 '21 at 08:19

codemonkey

7,325
5
22
36

This answer isn't wrong, but *why* does providing unique React key to each resolve the issue? – Drew Reese Mar 04 '21 at 08:21
1

@DrewReese I held off on adding that part because I thought your patented Problem/Solution answer was forthcoming, which would make everything super clear. :) – codemonkey Mar 04 '21 at 08:27
Nope, not this time. – Drew Reese Mar 04 '21 at 08:30

Input values are syncing up and I'd rather they not

1 Answers1