'To show multiple checkbox in flatlist

I'm working on flatlist with checkbox . The checkbox should come checked i.e true and when i uncheck it should push all the checked checkboxes to array . then i need to implement the api and i'll get the uncheck item in the response then i need to show in the flatlist . which item.id will be present in the response that id needs to be uncheck.

the code is

   <FlatList
     data={global.data_params}
     renderItem={({ item,index }) =><AlertItem item={item}/>}

   />

and componenet is

const [state, setstate] = useState(isChecked?isChecked:true)
console.log('state',state)
return (
<View style={{ flexDirection: "row",
marginBottom: 20,}}>
  
    <CheckBox
 
    checked={state}
onPress={() => setstate(!state)}
  
      style={{alignSelf: "center"}}
    />
    <Text style={{    margin: 8,
}}>{item.name}</Text>
  </View> )

and when i'll click on the submit i need to pass the array with unselect checkbox and after hiting that api another api will hit which will return the result with uncheck checkbox so my preblem is that how can i show the unselected checkbox from the api second time.

enter image description here

and also i need show tick on all the checkbox initially.

arraysreact-nativeapicheckboxflatlistlambdaamazon-lex


Solution 1:[1]

first of all make your state as this

   power: [
      {value: 0, text: 'low voltage', selected: false},
      {value: 1, text: 'power', selected: false},
      {value: 2, text: 'electricity', selected: false},
      {value: 3, text: 'power button', selected: false},
     
    ],

then before your render make new array variable and onchange of checkbox push your selected item in newTrueArray

  let newTrueArray = [];
    this.state.power.forEach((val) => {
      if (val.selected) {
        newTrueArray.push(val.value);
      }
    
    });

then for updating your check box you can do something like this

 updateCheckBox = (index, newSelected) => {
    let newArr = [...this.state.power];
    newArr[index].selected = newSelected;
    this.setState({purpose: newArr});
  };

and to show checkbox option in your UI, do like this

 {this.state.power.map((val, index) => {
          return (
            <ListItem noBorder>
              <Left>
                <Text style={{marginLeft: 30, color: 'gray', marginTop: 10}}>{val.text}</Text>
              </Left>
              <Right>
                <CheckBox
                  color="#0080af"
                  onPress={() =>
                    this.updateCheckBox(index, !val.selected)
                  }
                  checked={val.selected}
                  style={styles.check}
                />
              </Right>
            </ListItem>

Solution 2:[2]

You can simply put your data in the state like

  power: [
      {value: 0, text: {item.firstname}, selected: false},
      {value: 1, text: '{item.secondname}', selected: false},  
    ],

Solution 3:[3]

I've tested your scenario with a Lex V2 bot that has a Python Lambda function configured.

In my bot, IntentB uses the Lambda function as its fullfilment code hook.

The function returns the following response which instructs Lex to elicit the required slot in IntentA.

{
   "sessionState":{
      "dialogAction":{
         "slotToElicit":"Number",
         "type":"ElicitSlot"
      },
      "intent":{
         "confirmationState":"None",
         "name":"IntentA",
         "state":"InProgress"
      }
   }
}

My response is built using the formats as described in the Lex developer Guide - Lambda Response Format.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hammad Hassan
Solution 2 Bender the Greatest
Solution 3 Reegz

Related Questions