Two way data binding in React with Hooks

Question

I am building an application with React where two components should be able to change state of each other:

Component A -> Component B

Component B -> Component A

The Component A is a set of buttons and the Component B is an input element.

I managed to make it work only in one way, A -> B or just B -> A, but can't make it work both. It works partly with use of useEffect hook, but with bugs and this is really stupid idea, I think.

I have read a lot that React don't work this way, but is there any roundabouts how it is possible to make it work? I really need this 2-way data binding for my application.

Thanks for any help!

The state for buttons is located in digits variable from custom context hook (useStateContext) as an array.

import { useStateContext } from "components/StateProvider/Context"; 
import { useState, useEffect } from "react";

import { baseConvert } from "utility/baseConvert";

const NumberInput = () => {

  const [ { digits, baseIn, baseOut }, dispatch ] = useStateContext();

  const convertedValue = baseConvert({
    digits,
    baseIn,
    baseOut
  });

  const [ inputValue, setInputValue ] = useState(convertedValue);

  /* useEffect(() => {
    setInputValue(convertedValue)
  }, [ digits, baseIn, baseOut ]) */

  const regex = /^[A-Z\d]+$/;

  const handleInput = ({ target: { value }}) => {
    if (value === "") setInputValue(0);

    console.log(value);

    if (regex.test(value)) {
      setInputValue(value);
      dispatch({
        type: "setDigits",
        digits: baseConvert({
          digits: value.split("").map(Number),
          baseIn: baseOut,
          baseOut: baseIn
        })
      })
    }    
  };

  return (
    <input type="text" onChange={handleInput} value={inputValue} />
  );
};

export default NumberInput;

score 8 · Accepted Answer · edited May 04 '21 at 09:31

8

Components should not directly manipulate the state of other components. If you need to have shared data, bring the state to a parent component and pass callbacks to the children that can change the state.

For example:

function ParentComponent() {
  const [currentVal, setCurrentVal] = useState(0);
  return
   <>
     <Child1 value={currentVal} onChange={setCurrentVal}/>   // you might also pass a function that does some other logic and then calls setCurrentVal
     <Child2 value={currentVal} onChange={setCurrentVal}/>
   </>
}

edited May 04 '21 at 09:31

Reuben S

93
1
10

answered Jan 13 '20 at 00:29

Jeff Storey

56,312
72
233
406

Understood. Well, I will try break my state into two state pieces. Thank you for reply! – Eric Rovell Jan 13 '20 at 00:35
it seems currentVal will be the same for both children – Sergio Ivanuzzo Jul 28 '20 at 09:32

score 1 · Answer 2 · answered Jan 04 '21 at 19:07

1

@Jeff Storey The solution seems a bit wrong. The first index is the value and the second index is the function which updates the value.

It should be:

const [currentVal, setCurrentVal] = useState(0);

answered Jan 04 '21 at 19:07

Yamo93

514
3
12

Two way data binding in React with Hooks

2 Answers2