CheckBoxes not responding in List
See original GitHub issueWhat’s the proper way to handle a list of checkboxes? I’ve the following code, but the checkboxes just don’t respond to my clicks on both iOS and Android emulators.
I have:
"native-base": "2.1.3",
"react": "16.0.0-alpha.3",
"react-native": "0.43.2",
Here is the code:
import React, { Component } from 'react';
import { Container, Content, Item, List,
CheckBox, Body, ListItem, Text } from 'native-base';
class SelectFriends extends Component {
constructor(props) {
super(props);
this.state = {
friends: [{ id: 10, name:"Gundam" },
{ id: 20, name:"Rambo" },
{ id: 30, name:"Mickey Mouse" } ],
checkBoxChecked: false
};
}
onCheckBoxPress(id) {
console.log( "Checked!" );
console.log( id );
this.setState({
checkBoxChecked: !this.state.checkBoxChecked
});
}
render() {
return(
<Container>
<Content>
<Item>
<List dataArray={this.state.friends}
renderRow={(friend) =>
<ListItem>
<CheckBox
checked={this.state.checkBoxChecked}
onPress={()=>this.onCheckBoxPress(friend.id)}
/>
<Body>
<Text>{friend.name}</Text>
</Body>
</ListItem>
}
>
</List>
</Item>
</Content>
</Container>
);
}
};
export default SelectFriends;
The console.log works on clicks… so it’s somewhat working…
I’ve tried nativebase version 2.1.4 and 2.1.5. Got tons of build errors, so I went back to 2.1.3…
Issue Analytics
- State:
- Created 6 years ago
- Comments:11 (1 by maintainers)
Top Results From Across the Web
javascript - checkbox is not working properly in html how to fix?
Try this. First select the check box in JavaScript: const $checkbox = document.querySelector('.
Read more >Checkbox not working in lists - Honeycode Community
Hey Honeycode team, Checkboxes don't seem to work as described on Add Toggles: Checkboxes and Switches. I have a simple TODO list table ......
Read more >Insert checkbox in Excel: create interactive checklist or to-do list
Although the checkboxes are inserted and you can now check or uncheck them by simply clicking on a box, Microsoft Excel is not...
Read more >checkbox not getting selcted but list view shows exact value
i have some 5 checkboxes in form and they set to true base on some conditions of other fields. sometimes the checkboxes are...
Read more ><input type="checkbox"> - HTML: HyperText Markup Language
Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks @shivrajkumar . I made some tweaking to your code… the checkboxes work now.
For those who have an issue with Flatlists, add this as a prop to Flatlist itself: extraData={this.state}