how can i pass functional react component to a function?

Question

so what I am trying to achieve here is storing a whole component in an array in a parent component which renders a specific component in the array using its index for example :

export const Test = () => {
 const [components, setComponents] = useState([
   <Order key={1} />,
   <Order key={2} />,
   <Order key={3} />,
 ]);
 const [index, setIndex] = useState(0);
 return (
   <div>
     <button onClick={() => setIndex((old) => (old + 1) % components.length)}>
       change
     </button>
     {`page ` + index}
     {components[index]}
   </div>
 );
};

const Order = () => {
 const [someState, setSomeState] = useState(1);

 return (
   <div>
     <button onClick={() => setSomeState((old) => old + 1)}>
       {someState}
     </button>
   </div>
 );
};

when I change the state of one item then cycle through the items then return to the item which I changed its state i found that it is not updated

what I figured out is that the component in the array (in the Test component) doesn't get updated and I couldn't figure out how to update it

what I don't want to do is storing the state of the order item in the parent and pass it as props (because it will be a pain to make it work)

Answer 1

  const App = ({ flag }) => {
    if (flag) <Order />
    return null
  }

I'm giving you an example so i can explain what might happen in your case. If the flag becomes false from a true, the App turns blank. But what happen to the Order? It's unmounted, why? Since when React compares between the previous scene and the current scene, it notice there's no such Order any more. So what you think about the memory of component of Order (which is called a fiber)?

I guess the answer is, the memory goes to be deleted and will be collected for future use.

Now back to your case, you are using an id to switch to different component. But in theory it should behave very similar to my example for each component.

NOTE: the take away is that if you want to use an array, that's fine, but all components has to be rendered at ALL time, you can hide them, but you can't unmount any of them.