如何将 function（在数组内）作为 prop 传递给 React 中的子组件

Question

Is it possible to do something like this in React? (see comments in the code below):

/* Within Parent Component */
// `1` is a constant, `(i:any) => i` is a variable from the `for` loop in the child component. These 2 values need to be added
<SubComponent position={[(1 + (i:any) => i, 2]} />

...
/* Sub Component */
export default function SubComponent({ position }: {position: number[]}) {

    const object;
    count = 2;

    for (let i = 0; i < count; i++) {
      // todo I don't think `position[0](i)` is a valid syntax, but I want to pass the value of `i` to the function within the `position` array (and then add the constant `1`).
      object.position.set(position[0](i), position[1]);
      
...

// value of object.position:
1. [1,2]
2. [2,2]

If this doesn't make sense, I will amend the question, but something in the back of my mind is telling me to look into 'currying' as a possible solution, is this the right thing to Google for this scenario?

Answer 1

Figured it out, will leave it here in case it helps someone else:

<SubComponent position={[(i:number) => {return 1 + i}, 2]}

...

export default function SubComponent({ position }: {position: number[]}) {

    const object;
    count = 2;

    for (let i = 0; i < count; i++) {
      object.position.set(position[0](i), position[1]);

...