How to reload a component or call a function after action in another component with React Native

Camille 0
Viewed 46

I use React Native and Expo to develop an application on mobile and tablet.

The objective is to be able to answer a questionnaire where several questions are divided into various categories. A question may have a category or not, so they don't really follow each other in the code.

I use a loop to display my categories, with its questions inside. Questions are components, categories too.

When I answer a question, sometimes I want to reload another question specifically (or several). After answering my question, I have a list of questions I want to reload. I would like either to launch a function in the component, or to reload it entirely.

How do I reload the question component, which may be quite far from the one I acted on?

Thanks for your help !

I wanted to listen with UseEffect for the modification of my global variable, but it doesn't work. Also, I can't fully reload my page either. I would like to specifically reload the question component or run the function.

What I have already tried:

  • Reloading the page entirely from my screen with a function in global, didn't work ( I have a lot of elements so I would like to avoid reloading everything)

  • Listen with useEffect the change of my list of questions to modify to check if my id was in it, but the listening is not done

  • I can't send functions or other elements in the props of my question because they can be in different components (category or other) so too far away.

Question Component (simplified) :

export default function RealisationQuestionComponent(props){

//When action in Question A
function changeCheckA(value) {
   [...]
   if (props.question.questions_impactees !== undefined) {
      global.questions_impactees = props.question.questions_impactees;
   }
}

//Effect in Question B
useEffect(() => {
   [my function or reload entire component]
}, [global.questions_impactees]);


return (
   <>...</>
)

EDIT :

Following the answer, I tried to use useContext to retrieve my information, but it tells me Can't find variable : RealContext

What i would like to do :

https://www.w3schools.com/react/showreact.asp?filename=demo2_react_context2

What I have done :

My screen AuditRealisationScreen

const RealContext = createContext();
const [listIdVictimes, setListIdVictimes] = useState('please test');
[...]
return (
    <RealContext.Provider value={listIdVictimes}>
        <RealisationChapitreComponent/>
    </RealContext.Provider>
)

RealisationChapitreComponent > [...] > RealisationQuestionComponent

In my component RealisationQuestionComponent

const listTest = useContext(RealContext);
[...]
return (
    <Text> {listTest} </Text>
)

Can it work this way?

reload expo components react-native
1 Answers

Use [contexts][1]. Using [reducers][2] with context would be more flexible and organised.

If you have a lot of states to manage with mess of siblings and parent-child and child-parent relations then using [Redux][3] would give you more control to manage those components and its states

What I used do for

How to reload a component or call a function after action in another component with React Native

const context = ... // declare

and then

// import context
const App=()=>{
  ...
  return(
  <Context.Provider value={your functions, data, states, props whatever you want}>
      child components
  <Context.Provider/>
  )

}

You can play with these contexts usage to achieve your goal

  [1]: https://reactjs.org/docs/hooks-reference.html#usecontext
  [2]: https://reactjs.org/docs/hooks-reference.html#usereducer
  [3]: https://redux.js.org/introduction/why-rtk-is-redux-today#what-is-redux
CrackerKSR0
Related