How to update the value dynamically after api call

[Centeos]

Hi, Please help me on this,

I am new to React Native, i am using this control, but its value is not changing after api response, i need to update its value dynamically.

    const rd = [];
    response.data.data.map((data) => {
      rd.push({
         _id: data.id.toString(),
         value: data.employee,
       });
     });

        setReporting({
          list:rd,
          value: value.text,
          selectedList: value.selectedList,
          error: '',
        });

I am using above code but its not working.

[Anurag Srivastava]

Can you please share your code snippet if possible, and please elaborate on your issue.

I think what you want to do after API call is:

const rd = []; response.data.data.map((data) => { rd.push({ _id: data.id.toString(), value: data.employee, }); });

setReporting({...reporting, list:rd});

assuming your useState hook is declared like this:
const [reporting, setReporting] = useState({ value: '', list: [], selectedList: [], error: '', });

Make a copy using spread operator and update only those values you want using setState.

Please refer to this link: Example Code, API call is mimicked in line no. 46 useEffect

[Centeos]

Hi, Thanks for replying on this,

Actually i want to replace the complete value of list after api call.

Please check the below code what i have used.

const [reporting, setReporting] = useState({
    value: '',
    list: [],
    selectedList: [],
    error: '',
  });

  const FetchReportingEmployee = () => {
    console.log("start reporting");
    let params = {
      AddedByUserID: userID,
    };
    Provider.getAll(`master/getreportingemployeelist?${new URLSearchParams(params)}`)
      .then((response) => {
        if (response.data && response.data.code === 200) {
          if (response.data.data) {
            const rd = [];
            response.data.data.map((data) => {
              rd.push({
                _id: data.id.toString(),
                value: data.employee,
              });
            });
           
            setReporting({
              list:rd,
              value: value.text,
              selectedList: value.selectedList,
              error: '',
            });

            console.log(reporting.list);

            setReportingFullData(rd);
          }
        }
      })
      .catch((e) => { });
  };

[Anurag Srivastava]

I think this would update your list:

use

setReporting({...reporting, list: rd});

instead of

setReporting({
 list:rd,
 value: value.text,
 selectedList: value.selectedList,
 error: '',
});

please refer to this guide: useState in React: A complete guide for a better understanding of React's useState hook.

your code should look like this:

const [reporting, setReporting] = useState({
    value: '',
    list: [],
    selectedList: [],
    error: '',
  });

  const FetchReportingEmployee = () => {
    console.log("start reporting");
    let params = {
      AddedByUserID: userID,
    };
    Provider.getAll(`master/getreportingemployeelist?${new URLSearchParams(params)}`)
      .then((response) => {
        if (response.data && response.data.code === 200) {
          if (response.data.data) {
            const rd = [];
            response.data.data.map((data) => {
              rd.push({
                _id: data.id.toString(),
                value: data.employee,
              });
            });
           
            setReporting({...reporting, list: rd});

            console.log(reporting.list);
          }
        }
      })
      .catch((e) => { });
  };