Component Not Updating On State Update In React

Question

Environment: React

Configuration:
I have a Editor.js component that has AceEditor.
The Editor component is imported in App.js and used twice to show input and output data.
The input is processed to output on clicking button and the output box is supposed to display the updated value.
The input and output data are stored in a state.

Expected Result:
When the button is clicked, get the value from the input box, run the value through some function and show the result in outputbox.

Problem:
When I click the "Process" button, the output box is supposed to display the processed value in the Editor, but it only updates the state and don't update the Output Box at all.

Simplest form of entire projrct's source code showing only the mentioned problem:
https://stackblitz.com/edit/react-uvm1vc?file=src/App.js

Answer 1

When I click preview I can't see anything and I can't test code.

I can see you have Editor component what accept next values/methods from parent:
mode, value, placeholder, onChange

But in first you are sending:
All of above plus setInputCode(value) - you never used this method

Then in second Edit component you are sending:
mode, value, placeholder, onChange, setOutputCode, outputCode
Where I cant see thet you ever used setOutputCode or outputCode

Your Editor just render another component(not included) AceEditor, and you are not sending any of this values to it.

If I am not wrong you should get input from first Edit and output it in second? You need to send this methods what update state and change it in one component, it should trigger re-render and auto update another component where you display data, but this data need to be passed.

Answer 2

If you use same component do check does component receive this method before using it, because you are sending for one Edit, setInputCode(value) and in another setOutputCode and outputCode. Same component will expect to get all of them so you need to do some check or make separated component

Also if I am not wrong setInputCode(value) will set value directly you should pass reference not start method, so just setInputCode

Here is how function can accept infinity number of parameters, you can use this to check does it have some values and use only values you need:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters