Frappe React SDK

How to modify this code for frappe-react-sdk

frappe.call({
  method: "frappe.client.get_value",
  args: {
  doctype: "Leaderboard Entry",
  filters: {
  employee_profile: frappe.session.user,
  reference_doctype: doctype,
  },
  fieldname: ["points"],
  },
  callback: (r) => r.message.points
  });

Hi,
For this you will need to user the useEffect hook to make the request to the server and fetch the values.

import { useState, useEffect } from 'react';
import frappe from 'frappejs';

function YourComponent(props) {
  const [points, setPoints] = useState(null);

  useEffect(() => {
    frappe.call('frappe.client.get_value', {
      doctype: 'Leaderboard Entry',
      filters: {
        employee_profile: frappe.session.user,
        reference_doctype: props.doctype,
      },
      fieldname: ['points'],
    }).then(response => {
      setPoints(response.message.points);
    });
  }, []);

  return (
    <div>
      {points ? `Points: ${points}` : 'Loading...'}
    </div>
  );
}

Hope this will help you out.

Thank you.

Hi bro,
How to use react in frappe?
whether we have to setup react project using npx create-react-app
Or
we have install the package of npm install frappe-react-sdk in our existing frappe app

Please share it bro thankyou