How can I change this functional component into a class based component in react native?

Question

I am trying to change this functional-based component into a class-based component so that I can setState with value getting from slider left and right cursors.

import React, { useState } from "react";

import { StyleSheet, View, Text } from "react-native";

import MultiSlider from "@ptomasroos/react-native-multi-slider";
import CustomMarker from "./CustomMarker";

const App = () => {
  const [
    nonCollidingMultiSliderValue,
    setNonCollidingMultiSliderValue
  ] = useState([0, 100]);

  const nonCollidingMultiSliderValuesChange = (values) => {
    console.log(values);

    setNonCollidingMultiSliderValue(values);
  };

  return (
    <View style={styles.container}>
      <Text>MultiSlider</Text>
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between",
          marginTop: 10,
          width: "310px"
        }}
      >
        <View>
          <Text
            style={[
              { fontStyle: "italic" },
              { fontSize: 14, color: "#E4E4E4" }
            ]}
          >
            Min
          </Text>
          <Text
            style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
          >
            {nonCollidingMultiSliderValue[0]}€
          </Text>
        </View>
        <View>
          <Text
            style={[
              { fontStyle: "italic" },
              { textAlign: "right", fontSize: 14, color: "#E4E4E4" }
            ]}
          >
            Max
          </Text>
          <Text
            style={[{ fontWeight: "bold" }, { fontSize: 18, color: "#000000" }]}
          >
            {nonCollidingMultiSliderValue[1]}€
          </Text>
        </View>
      </View>
      <MultiSlider
        values={[
          nonCollidingMultiSliderValue[0],
          nonCollidingMultiSliderValue[1]
        ]}
        onValuesChange={nonCollidingMultiSliderValuesChange}
        min={0}
        max={100}
        step={1}
        snapped
        allowOverlap={false}
        // minMarkerOverlapDistance={40}
        minMarkerOverlapStepDistance={40}
        customMarker={CustomMarker}
        trackStyle={{
          height: 5,
          borderRadius: 8
        }}
        // containerStyle={{
        //   width: "100%",
        //   flexDirection: "column",
        //   justifyContent: "center",
        //   alignItems: "center"
        // }}
        selectedStyle={{
          backgroundColor: "orange"
        }}
        unselectedStyle={{
          backgroundColor: "#ABB5B6"
        }}
      />
    </View>
  );
};

export default App;

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    width: "100%"
  }
});

I already tried this but I am not able to take values of slider separately and setState.

Here is my code:

MultiSlider
                            values={[this.state.rangeLow, this.state.rangeHigh]}
                            isMarkersSeparated={true}
                            customMarker={CustomMarker}
                            onValuesChange={(values) => {
                              this.setState({
                                rangeLow :values, rangeHigh: values,
                              });
                            }}
                            enabledOne
                            enabledTwo
                            min={0}
                            max={500}
                            step={1}
                            snapped
                            showSteps={true}
                            trackStyle={{
                              height: 5,
                              borderRadius: 8,
                            }}
/>

Everything is working fine but the values are like this 0-0 and when the cursor moves then the same values are on either side. But with the functional components, everything is fine.

How can I change into a class-based component?

Answer 1

Your problem lies in your onValuesChange prop:

onValuesChange = {(values) => {
    this.setState({
        [rangeLow, rangeHigh]: values,
    });
}}

It isn't allowed to use array destructuring like that in JavaScript. Use this instead:

onValuesChange = {(values) => {
    this.setState({
        rangeLow: values[0], rangeHigh: values[1],
    });
}}

Or with different syntax using destructuring:

onValuesChange = {([ rangeLow, rangeHigh ]) => {
    this.setState({ rangeLow, rangeHigh });
}}