setState not toggle value in react native

user_14279561 0
Viewed 301

i am having function that toggle the state variables value. the initial value of the state variable is false

Here is my function...

    expandLists(label){ // "label" is a state variable that passed as a string 
        let result = new Boolean();
        console.log(this.state);
        if(this.state.label){
            result=false;
            console.log('Result = false');
        }
        else{
            result=true;
            console.log('Result = true');
        }
        this.setState({[label]: result},console.log(this.state))
    }

In the above expression at inital state the value is changed to false then it is not changing to true.

I have also tried.. the below method...

    expandLists(label){
        this.setState( preState => ({label: !this.preState.label}),console.log(this.state))
    }
setstate react-native reactjs
6 Answers

If you pass the label parameter as a string, then try this:

    expandLists(label){ // "label" is a state variable that passed as a string 
        let result = new Boolean();
        console.log(this.state);
        if(this.state[label]){
            result=false;
            console.log('Result = false');
        }
        else{
            result=true;
            console.log('Result = true');
        }
        this.setState({[label]: result},console.log(this.state))
    }

So the difference is in checking if the current value is truethy. In stead of using this.state.label, use this.state[label].

user_28051210

Check this way as you said "label" param type of string

if(this.state.label == "true"){
...
}

or

if(this.state[label]){
...
}
user_12833450

Easy way to achieve this is

toggleLabelValue = (label) => {
    this.setState({ [label]: !this.state[label] }, () =>
      console.log(this.state)
    );
};

user_76170550

Try toggling state in this way:

import React from 'react';

import {
    View,
    Button,
} from 'react-native';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            label: false
        }
    }

    changeLabel = (currentLabel) => {
        this.setState({
            label: currentLabel
        });
    };

    toggleLabel = () => {
        this.changeLabel(!this.state.label);
    };

    render() {
        return (
            <View>
                <Button onPress={this.toggleLabel} title="Toggle Label" />
            </View>
        );
    }

}
user_61742710

Here is another implementation using hooks:

import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [label, setLabel] = useState(false);
  const toggleLable = () => {
    let temp = label;
    setLabel(!temp);
  };
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={toggleLable}
        style={[
          styles.btn,
          { backgroundColor: label ? '#4f4' : '#f40' },
        ]}>
        <Text style={styles.text}>{label? "TRUE": "FALSE"}</Text>
        </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  btn: {
    width: 200,
    height: 200,
    borderRadius: 20,
    justifyContent: "center"
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center',
  },
  text:{
    fontSize: 40,
    fontWeight: "bold",
    color: "white",
    textAlign: "center"
  }
});

Screenshot:

enter image description here

You can play around with the code here: Toggle Button Example

user_56691200

this works for me using useState:

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import SeparateModal from 'components/SeparateModal';

export default function Parent() { 
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>

      <SeparateModal 
        modalVisible={modalVisible}
        setModalVisible = {setModalVisible}
      />

      <TouchableOpacity>
        <Text onPress = { () => setModalVisible(true) }>Open Modal</Text>
      </TouchableOpacity>

    </View>
  )
}

components/SeparateModal:

export default function SeparateModal({ modalVisible, setmodalVisible }) {
  return (
    <Modal 
      visible={ modalVisible }
      animationType="slide" 
    >
      <View>
        <TouchableOpacity>
          <Text onPress = { () => setModalVisible(false) }>Close Modal</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  );
user_40380250
Related