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)

I think they are not updated since they are not mounted, maybe you can render all but show the specific one depend on the index? — Amir Saadallah
– Amir Saadallah, Commented Sep 18, 2021 at 22:07

windmaomao · Accepted Answer · 2021-09-18 22:19:58Z

  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.

gmoniava · Accepted Answer · 2021-09-18 22:24:54Z

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)

Your problem is that when you render a Test component and then increase index, then you render another Test component with a different key, so reacts reconciliation algorithm unmounts the old one and you lose the state.

You have two options:

lift state of each Test component up, then when one gets unmounted, you will remount it with the old state, because state will be stored in parent, it will not be lost
another option is to render all components and only show those which you want using CSS display property, this way none of them gets unmounted and you retain state. Here is example:

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

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

let components = [<Order />, <Order />, <Order />];

const Test = () => {
  const [index, setIndex] = React.useState(0);
  return (
    <div>
      <button onClick={() => setIndex((old) => (old + 1) % components.length)}>
        change
      </button>
      {`page ` + index}
      {[0, 1, 2].map((x) => (
        <div key={x} style={{ display: index === x ? "block" : "none" }}>
          {components[x]}
        </div>
      ))}
    </div>
  );
};

 
ReactDOM.render(
 <Test />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

PS I have removed components from state, I can't find official info now, but IMHO it is not good idea to store components in state.

Collectives™ on Stack Overflow

how can i pass functional react component to a function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related