Question 35233 in React native Question posted in
The official React Native documentation can be found here.

React/React Native Experience Point Counter?

I am trying to make an experience point counter for a project I am working on. I want it to increase by 15 each time the user reaches the "Quiz Completion" page that I have and display the number on the profile page. But I’ve only seen tutorials on how to make counters with a manual button to increment and decrement.

I’m a beginner with React so I was wondering if anyone can explain how to make one like I described? Examples would be great too!

Tags:

2

Answers


  1. 0

    If you’re using React Functional Components (RFC), you can use from useEffect hook that you should import from React and use from empty dependency to run your code once (when a user opens this screen).
    You can write your codes (to increase the score) in the callback of useEffect like this:

    import { useEffect } from "react";
import "./styles.css";

export default function QuizCompletion() {

  useEffect(() => {
    // Your code for increase your score state here
  }, [])

  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    IMO you should NOT use useEffect. Right before navigating to ‘Quiz Completion’ page you probably send some data to server. If the request is successful, you should add to experience point counter in its callback.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search