[SOLVED] React-Native - Switch onValueChange input refers to wrong field

React-Native - Switch onValueChange input refers to wrong field

I need to create a class which automatically creates several Objects (Text & Switch pairs) on the basis of a JSON and the Switch should fetch different values when the onValueChange event is triggered.

The issue: If you look at the following code. The function switchChanged just fetches the last incoming field (location). Strange here is: The above Text fields all get the right value handed over. Just at the onValueChange function I get only the last field handed over

I deleted all styles to get easier read through

JSON looks like the following:

module.exports = {
    "reminders":
    {
        "title": "Erinnerungen",
        "description": "Sollten Sie Favoriten gesetzt haben, können Sie uns hier erlauben Sie an die Events zu erinnern.",
        "startvalue": true
    },
    "noIntro":
    {
        "title": "Introseite",
        "description": "Wenn Sie wollen können Sie die beim ersten Start gezeigte Introseite bei jedem Start anzeigen lassen.",
        "startvalue": true
    },
    "location":
    {
        "title": "GPS erlauben",
        "description": "Erlauben Sie ihrem Smartphone das GPS für unsere Campuskarte zu benutzen.",
        "startvalue": true
    }
}

Class (Settings) where the magic should happen:

//There i require the above JSON
var settingIndex = require('../../settingIndex');

class Settings extends Component {
    constructor(props) {
        super();
    }
  
  getSettingBox(){
        var Settings = [];
        var object = {};

        for (var topicKey in settingIndex){
            var value = SettingStorage.get().filtered('key = "' + topicKey + '"')[0].value;
            var title = settingIndex[topicKey].title;
            var description = settingIndex[topicKey].description;

            object=(
                <View>
                    <View>
                        <Text>{title}</Text>
                        <Text>{description}</Text>
                    </View>
                    <Switch
                        onTintColor={styleHelper.colors.ACCENT_COLOR}
                        onValueChange={(value) => this.switchChanged(topicKey, value)}
                        value={value}/>
                </View>
            );
            Settings.push(object)
        }
        return Settings;
    }

    render() {
        var Settings = this.getSettingBox();
        return(
            <View>
                <View>
                    {Settings}
                </View>
            </View>
        );
    }

    switchChanged(field, value) {
        console.log("Feld: " + field + "--- Value: " + value);
        var obj = {};
        obj[field] = value;
        SettingStorage.set({
            key: field,
            value: value
        });
        this.setState(obj);           
    }
}

Further information:

The SettingStorage is my own class where I can save and get stuff from/to Realm

The startvalue is set initial at the first start of the app

Thank you very much in advance for you help.

Solution

Okay 5 minutes after asking I know the answer. After felt 3000 hours of despair.

The issue: At the getSettingBox() I changed the for(var topicKey in settingIndex) to for(let topicKey in settingIndex). So the issue seems to be the lifecycle of the variable/let.

I wont close this question maybe someone has the same issue and freaks out like me.

Greetings