Issues when converting a class component to functional component

Question

I've attempted to convert the following demo.js class component here into a functional component over here (demo.js) and when I attempt to make a change, I receive the error:

immutableTree is not defined

Any help would be great.

Answer 1

Let's check your lines 131 - 144 in detail:

const onChange = (immutableTree, config) => {
    immutableTree = immutableTree; // <-- why are you assigning the same var to itself?
    config = config;  // <-- why are you assigning the same var to itself?
    updateResult(); // <-- you are not passing any variables here

    const jsonTree = getTree(immutableTree);
    const { logic, data, errors } = jsonLogicFormat(immutableTree, config);
  };

  const updateResult = throttle(() => {
    setState({ tree: immutableTree, config: config }); // <-- but here you expect variables to be used
  }, 100);

The solution: We need to ensure that our updateResult function is getting the variables it needs in order to proceed.

The corrected version:

 const onChange = (immutableTree, config) => {
    updateResult(immutableTree, config);

    const jsonTree = getTree(immutableTree);
    const { logic, data, errors } = jsonLogicFormat(immutableTree, config);
  };

  const updateResult = throttle((immutableTree, config) => {
    setState({ tree: immutableTree, config });
  }, 100);