lundi 27 avril 2020

multiple checkboxes overwrite one another in react native

I have a list of conditions i need check boxes next to. I have been able to do this, but now once a second checkmark is introduced , the first disappears. My code is as follows:

import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';
import styles from './Styles';
import { CheckBox } from 'react-native-elements'


export default class Symptoms extends React.Component {
state = {
    checkedId: 'false',
    checkboxes: [
        {id: 1, title: "Fever"},
        {id: 2, title: "Headache"},
     ]
  }

  handleCheck = (checkedId) => {
    this.setState({checkedId})
  }

render() {
    const { checkboxes, checkedId } = this.state

  return (
    <View style=>

        <View>
                {checkboxes.map(checkbox => (
                    <CheckBox
                    center
                    iconRight
                    checkedIcon='check-circle-o'
                    uncheckedIcon='circle-o'
                    checkedColor='#122fae'
                    uncheckedColor='#122fae'
                    key={checkbox.id}
                    title={checkbox.title}
                    checked={checkbox.id == checkedId}
                    onPress={() => this.handleCheck(checkbox.id)}

                    />
                ))}
        </View>
     </View>
  );
}

}




Aucun commentaire:

Enregistrer un commentaire