How to inject string into api response in react native?

Question

I have an array of objects response that comes from API. I don't have access to the API to be able to change it.

data = [
   {"label": "Group 1", "value": "1"}, 
   {"label": "Group 2", "value": "2"}, 
   {"label": "Group 3", "value": "3"}
]

I need to display the data, so the label says Post to ${label}.

Can I inject the 'Post to ' string somehow? Do I make a new array from my response?

Here's how I'm fetching the data:

const [pickerData, setPickerData] = React.useState<{ label: string; value: string }[]>([]);
const fetchPickerData = React.useCallback(async () => {
  const response = await getPostLocations();
  if (!response) return;

  if (response) {
    setPickerData(response);
  }
}, []);

React.useEffect(() => {
  fetchPickerData().catch(console.error);
}, [fetchPickerData]);```

and my data is then loaded into a picker: 

  <Picker
      items={pickerData}
      value={pickerItem}
      onValueChange={(pickerItem) => setPickerItem(pickerItem)}
    />


Things I already tried is trying to inject string into value like value={()=>{`Post to ${pickerItem}`}}, or the same in the setPickerItem in onValueChange but that didn't work

So you want your array to look like data = [ { "label": "Post to Group 1", "value": 1 } , ... ] right? — albjerto
– albjerto, Commented Sep 14, 2022 at 12:00
@BhavyaKoshiya 'react-native-picker-select'. I had a look if I can do it there somehow, but I think it's just easier to somehow insert the data once I get a response — verunar
– verunar, Commented Sep 14, 2022 at 12:07

albjerto · Accepted Answer · 2022-09-14 12:16:17Z

1

You can use Array#map() to create a new array from the response in the format you prefer:

const fetchPickerData = React.useCallback(async () => {
  const response = await getPostLocations();
  if (!response) return;

  if (response) {
    const formattedResponse = response.map(
        ({ label, value }) => ({ 'label': `Post to ${label}`, value })
    )
    setPickerData(formattedResponse);
  }
}, []);

answered Sep 14, 2022 at 12:16

albjerto

5714 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhavya Koshiya · Accepted Answer · 2022-09-14 12:10:58Z

Try it like this

const [pickerData, setPickerData] = React.useState<{ label: string; value: string }[]>([]);
const [apiData, setApiData] = React.useState<{ label: string; value: string }[]>([]);

const fetchPickerData = React.useCallback(async () => {
  const response = await getPostLocations();
  if (!response) return;

  if (response) {
    setApiData(response);
  }
}, []);

React.useEffect(() => {
  fetchPickerData().catch(console.error);
}, [fetchPickerData]);

React.useEffect(() => {
  if (apiData.length > 0) {
    let Temp = [];
    apiData.forEach((item) => {
      let newItem = {
        ...item,
        label: `Post to ${item.label}`
      };
      Temp.push(newItem);
    });
    setPickerData(Temp);
  }
}, [apiData]);

Collectives™ on Stack Overflow

How to inject string into api response in react native?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related