Reuse a constant inside a React functional component in another component

Question

I have a constant like below that I am using inside a react functional component -

const superHeroPowers = [
    { name: 'Superman', status: superManPowerList },
    { name: 'Batman', status: batmanPowerList },
    { name: 'Wonder Woman', status: wonderWomanPowerList }
  ];

Here, the values of the status property are coming from the state local to the component. Now, I would like to use this constant in another component while routing. How can I achieve this? I have tried to export the constant but modifiers are not allowed inside a React component. Also, I tried to declare this constant outside the component, but then it will not be able to pick up the local state in status. I can't pass it as props because I am using the next router to navigate.

It's important to note that this is not a constant, it is state. You will have to lift the state up by using callbacks, or use a React Context to make it accessible to a whole portion of the dom. — windowsill, Oct 20 '22 at 17:33
What should happen when someone loads the other route directly without first going to this route? — Konrad, Oct 20 '22 at 17:34
@windowsill No, the state is just the status part of the object — Mohit Chauhan, Oct 20 '22 at 17:35
You can achieve this by pass this data with the router.push(). Check it on here. https://stackoverflow.com/questions/42173786/react-router-pass-data-when-navigating-programmatically — Dulaj Ariyaratne, Oct 20 '22 at 17:36
@MohitChauhan The point of Konrads comment is most likely to point out to you that there is a logic gap here in your thinking. If part of the constant is local state, it can't be known outside of the component. You need to move the state out, or pass it to where it's needed. Saying "I'm not going to do that" doesn't magically resolve the flawed line of thinking. — super, Oct 20 '22 at 17:48
@super I never said I am not going to do that. What I meant is that the scenario is already handled — Mohit Chauhan, Oct 20 '22 at 18:04
@MohitChauhan And what I meant is that the fact that you have handled that scenario is meaningless is the context of your question. Up is not down, no matter how much you stand on your head. — super, Oct 20 '22 at 18:16
@super The problem here is that I am stuck with this scenario. I didn't create it. Better not reply if you are not willing to help. — Mohit Chauhan, Oct 20 '22 at 18:41
@MohitChauhan Why not try to understand the problem and learn something? SO is not just for getting solutions dropped in your lap. You can actually reason about things with other people and by that process get better understanding. — super, Oct 20 '22 at 18:54

score 1 · Answer 1 · answered Oct 20 '22 at 17:46

Seems like you have to use redux or context API as a state management mechanism to store your constant superHeroPowers with the appropriate status values you want. Then you can use the superHeroPowers(which is available in the store) from other components.

Reuse a constant inside a React functional component in another component

1 Answers1