How to assign values in react native

Question

I get 4 values from an api [10, 20, 22, 26]. These values are assigned to [A, B, C, D] and I have a slider that has these values [1, 2, 3 ,4].

What I need is when you select 1 in the slider, it gives you the value of A (which is 10 in this case). If you select 2 in the slider it should give you the value of B (which is 20), and so on.

Do you have any idea how can i do this?

This is my code:

const [sliderValue2, setsliderValue2] = useState();
const [A, setvA] = useState();
const [B, setvB] = useState();
const [C, setvC] = useState();
const [D, setvD] = useState();
const [pterms, setpterms] = useState([]);
const [value, setValue] = useState(setpterms[0]);

<View style={{alignItems: 'stretch', justifyContent: 'center' }}>
    <Slider 
        maximumValue={D > 0 ? 4: 3 }
        minimumValue={1}
        step={1}
        value={pterms.indexOf(value)}
        onValueChange={index => setValue(pterms[index])}  
    />
    <View style={styles.plazos}>
        <Text style={styles.plazo1}>{A} meses</Text>
        <Text style={styles.plazo2}>{B} meses</Text>
        <Text style={styles.plazo3}>{C} meses</Text>
        {D > 0 ? <Text style={styles.plazo3}>{D} meses</Text>: null }
    </View>

    <Text style={styles.slideText}>Su credito por:  ${A}MXN</Text>
    <Text style={styles.slideText}>Usted recibe:    ${A}MXN</Text>
    <Text style={styles.slideText}>A un plazo de:  {sliderValue2} meses</Text>

    <Text style={styles.PaymentText}>Su pago: ${A}.00 MXN</Text>
</View>

edit this is my api call

  useEffect(() => { 
async function BCcontroller() {
   const vCreationUser = 6;
   const vSolicitudeId = 8;
   const { data } = await ForceApi.post(`/ConsultBCController.php`, {vSolicitudeId, vCreationUser});
        const values = data.terms;
        setpterms(data.terms);
        const [termA, termB, termC, termD] = values.split(',');
        setvA(Number(termA));
            setvB(Number(termB));
            setvC(Number(termC));
            setvD(Number(termD));
    }
    BCcontroller();
}, []);

CampbellMG · Accepted Answer · 2020-01-16 00:37:39Z

1

You could store the value of your slider and use it as an index for the array from your API, something like this (working example):

export default function App() {
  const valuesFromApi = [10, 20, 22, 26];
  const [value, setValue] = useState(valuesFromApi[0]);

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{value}</Text>
      <Slider
        minimumValue={0}
        maximumValue={3}
        step={1}
        value={valuesFromApi.indexOf(value)}
        onValueChange={index => setValue(valuesFromApi[index])}
      />
    </View>
  );
}

edited Jan 16, 2020 at 0:37

answered Jan 15, 2020 at 23:23

CampbellMG

2,2101 gold badge22 silver badges30 bronze badges

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

6 Comments

ignos555 Over a year ago

when i pass it to hooks it prints characters like , and wrong numbers

CampbellMG Over a year ago

Does the example function as you would expect?

ignos555 Over a year ago

yes, im not sure if its how i call my array or something

CampbellMG Over a year ago

Can you update your original question with your implementation

ignos555 Over a year ago

edited, as you can see i only changed your valuesFromApi for my pterms (wich in the console.log shows me 24,36,48

|

Collectives™ on Stack Overflow

How to assign values in react native

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related