CODEWITHSUNDEEP
javascriptreactjsreact-native
Kedar Dave
Kedar Dave

Reputation: 481

Add value of checkbox to an array when it is clicked

I have this situation where I want to transfer userid to an array which is defined in State.

I want to do it when I click on the checkbox to select it, and I want to remove the userid from the array when I deselect the checkbox 

import React, { Component } from "react";
import { 
    View,
    Text,
    StyleSheet,
    FlatList,
    AsyncStorage
    } from "react-native";
import axios from 'axios';
import { Button, Container, Content, Header, Body, Left, Right, Title } from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
import { List, ListItem, SearchBar, CheckBox } from "react-native-elements";
    
    // const itemId = this.props.navigation.getParam('itemId', 'NO-ID');
    // const otherParam = this.props.navigation.getParam('otherParam', 'some default value');

    class TeacherSubjectSingle extends Component{
        static navigationOptions = {
            header : null
        }
        // static navigationOptions = {
        //     headerStyle: {
        //         backgroundColor: '#8E44AD',
        //       },
        //     headerTintColor: '#fff',
            
        // }

        state = {
            class_id: null,
            userid: null,
            usertype: null,
            student_list: [],
            faq : [],
            checked: [],
        }

        componentWillMount = async () => {
            const {class_id, student_list, userid, usertype} = this.props.navigation.state.params;
            await this.setState({
                class_id : class_id,
                student_list : student_list,
                userid : userid,
                usertype : usertype,
            })
            console.log(this.state.class_id)
            var result = student_list.filter(function( obj ) {
                return obj.class_section_name == class_id;
              });
            this.setState({
                student_list: result[0]
            })
            
        }

        renderSeparator = () => {
            return (
              <View
                style={{
                  height: 1,
                  width: "100%",
                  backgroundColor: "#CED0CE",
                }}
              />
            );
        };

        checkItem = (item) => {
            const { checked } = this.state;
            console.log(item)
            if (!checked.includes(item)) {
              this.setState({ checked: [...checked, item] });
              
            } else {
              this.setState({ checked: checked.filter(a => a !== item) });
            }
            console.log(checked)
        };

        render(){
            
            return (
                <Container>
                    <Header style={{ backgroundColor: "#8E44AD" }}>
                        <Left>
                            <Button transparent onPress={()=> this.props.navigation.navigate('ClassTeacher')}>
                                <Icon name="ios-arrow-dropleft" size={24} color='white' />
                            </Button>
                        </Left>
                        <Body>
                            <Title style={{ color: "white" }}>{this.state.class_id}</Title>
                        </Body>
                        <Right>
                            {this.state.checked.length !== 0 ? <Button transparent onPress={()=> this.props.navigation.navigate('ClassTeacher')}>
                                <Text>Start Chat</Text>
                            </Button> : null}
                        </Right>
                    </Header>
                    <View style={{flex: 1, backgroundColor: '#fff'}}>
                    <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
                    <FlatList
                        data={this.state.student_list.students}
                        extraData={this.state.checked}
                        renderItem={({ item }) => (
                        <ListItem
                            // roundAvatar
                            title={<CheckBox
                            title={item.name}
                            checkedColor='#8E44AD'
                            onPress={() => this.checkItem(item.userid)}
                            checked={this.state.checked.includes(item.userid)}
                            />}
                            // subtitle={item.email}
                            // avatar={{ uri: item.picture.thumbnail }}
                            //containerStyle={{ borderBottomWidth: 0 }}
                            onPress={()=>this.props.navigation.navigate('IndividualChat', {
                            rc_id: item.userid,
                            userid: this.state.userid,
                            usertype: this.state.usertype,
                            subject_name: this.state.student_list.subject_name
                            })}
                        />
                        )}
                        keyExtractor={item => item.userid}
                        ItemSeparatorComponent={this.renderSeparator}
                        
                    />
                    </List>
                    </View>
                </Container>
            );
        }
    }
export default TeacherSubjectSingle;

const styles = StyleSheet.create({
    container:{
    flex:1,
    alignItems:'center',
    justifyContent:'center'
    }
});

this is the code for the same, I have created a function checkItem()for the same and it is working, the only problem is, when I click on the first item, it will output the blank array, I select the second item and it will return the array with first item and so on. Please help me resolve it, thanks in advance

Upvotes: 2

Views: 5510

Answers (3)

Krina Soni
Krina Soni

Reputation: 930

Try below code:

  checkItem = (e) => {
   let alreadyOn = this.state.checked; //If already there in state

    if (e.target.checked) {
      alreadyOn.push(e.target.name); //push the checked value
    } else {
       //will remove if already checked
      _.remove(alreadyOn, obj => {
        return obj == e.target.name;
      });
    }
    console.log(alreadyOn)
    this.setState({checked: alreadyOn});
}

Upvotes: 2

Mayank Shukla
Mayank Shukla

Reputation: 104369

Its because you are printing this.state.checked value just after the setState, setState is async, it will not immediately update the state value. You can use setState callback method to check the updated state values.

Write it like this:

checkItem = (item) => {
    const { checked } = this.state;
    let newArr = [];

    if (!checked.includes(item)) {
        newArr = [...checked, item];
    } else {
      newArr = checked.filter(a => a !== item);
    }
    this.setState({ checked: newArr }, () => console.log('updated state', newArr))
};

Check this answer for more details about setState:

Why calling setState method doesn't mutate the state immediately?

Upvotes: 2

Ronnie Smith
Ronnie Smith

Reputation: 18555

Like this, with an event listener and the .push method of an array.

var checkboxes = document.querySelectorAll('input[type=checkbox]'); 
var myArray = [];
for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener("click", function(e) {
      myArray.push(e.target.value);
      console.log(myArray);
    });
};
<div>
    <input type="checkbox" name="feature" value="scales" />
    <label >Scales</label>
</div>

<div>
    <input type="checkbox" name="feature" value="horns" />
    <label >Horns</label>
</div>

<div>
    <input type="checkbox" name="feature" value="claws" />
    <label >Claws</label>
</div>

Upvotes: 0

Related Questions