Input and Outputs for React Components

One of the things that bothered me with React is the input/output dynamics for components. I can handle the input only components but not quite the input/output components. And for awhile I couldn't understand it up until now.

So from a background in Python, a React component is like a class. It is clear when it is being written

someVariableC, someVariableD = PythonClass(someVariableA, someVariableB)

The ones inside the parethensis are inputs. The ones before the = sign are the outputs. SUPER CLEAR

but in React component, it would be something like this

< PythonClass someVariableAName={someVariableA} someVariableBName={someVariableB} someVariableCName={someVariableCName} />

It's a bit confusing since a component will always return an HTML for rendering, which is given output. But for custom output. How to determine at face value?

The thing is you can't. You need to check if the variable is a constant or a function. If its a constant being passed then it is an input. If its a function, you have to check if inside the component AND the component parent if it uses the function to process data internally or need to send it back.

I find it convoluted but it does make sense. The "return" in Python is usually just output but the return in JSX can be an HTML or a PROP (which can be both outputs)