How to choose muliple potions from JSON in React Native?

Viewed 22

I have rendered data from an array / JSON and its shows on screen. When I click on an option its heiglights the box on which I have clicked. But I want to heightlight multiple options or want to choose multiple options from array. I am not getting how to do that. It only shows only one option and when I click click on another otion it heighlights the option but dehighlights the previous option. Please suggest me solution for that. I have share image and code below -

Image: enter image description here

Code:

import React, {useContext} from 'react'; import { Dimensions, Image, StatusBar, Text, TouchableHighlight, } from 'react-native';

import {Box, Button, ScrollView} from 'native-base';
import {useState} from 'react';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import {styles} from './createHabitStyles';
import {ApplicationContext} from '../../../context/application_ctx';
import {IconCheck, IconCircleBack} from '../../../svgIcons/icons';

export function ChooseTechnique({navigation, choose}) {
  const [chooseButton, setChooseButton] = useState();
  const {habitNavigation,setHabitNavigation,chooseSpan} =
    useContext(ApplicationContext);
  const {techniques, setTechniques} = useContext(ApplicationContext);

  let techniqueChooser = [
    {button: 'Mood Journal',src:require('../../../assets/images/techniqueBackgrounds/journal.jpg')},
    {button: 'Meditation',src:require('../../../assets/images/techniqueBackgrounds/meditation.jpg')},
    {button: 'ABCD',src:require('../../../assets/images/techniqueBackgrounds/abcd.jpg')},
    {button: 'Optimism',src:require('../../../assets/images/techniqueBackgrounds/optimism1.jpg')},
    {button: 'Journal',src:require('../../../assets/images/techniqueBackgrounds/journal.jpg')},
    {button: 'Motivation',src:require('../../../assets/images/techniqueBackgrounds/motivation.jpg')},
    {button: 'Defusion',src:require('../../../assets/images/techniqueBackgrounds/defusion.jpg')},
    {button: 'Values',src:require('../../../assets/images/techniqueBackgrounds/goals.jpg')},
    {button: 'Goals',src:require('../../../assets/images/techniqueBackgrounds/values.jpg')},
    {button: 'Thought Record',src:require('../../../assets/images/techniqueBackgrounds/thought.jpg')},
    {button: 'Breathe',src:require('../../../assets/images/techniqueBackgrounds/breathe.jpg')},
  ];


  return (
    <>
      <StatusBar
        backgroundColor={'#F5F5F5'}
        translucent={false}
        barStyle={'dark-content'}
      />
      <Box style={styles.MainBox}>
        <ScrollView>
          <Box style={{height: '6%', alignItems: 'center'}}>
            <Text style={styles.stepperTxt}>Create Habit</Text>
          </Box>
          <IconCircleBack
            onPress={() => setHabitNavigation(0)}
            style={{...styles.iconBack, top: '2.2%'}}
          />
          <Box style={styles.choosenBox}>
            <Box
              style={styles.choosenButton}>
              <Text style={{fontSize: 15, color: '#5D535C'}}>
                {chooseSpan.but}
              </Text>
            </Box>
            {chooseButton !== undefined ? (
              <Box
                style={styles.choosenButtonDynamic}>
                <Text style={{fontSize: 15, color: '#5D535C'}}>
                  {techniques}
                </Text>
              </Box>
            ) : (
              ''
            )}
          </Box>
          <Box style={{height: '6%', marginTop: '2%'}}>
            <Text style={styles.headTxt}>Choose a technique</Text>
            <Text
              style={styles.subHeading}>
              Create a habit from any one of your susbcribed techniques
            </Text>
          </Box>
          <Box style={{height: 1050}}>
            <Box style={{alignItems: 'center'}}>
              {techniqueChooser.map((data, i) => {
                return (
                  <TouchableHighlight
                    key={i}
                    underlayColor={'none'}
                    onPress={() => {
                      setChooseButton(i), setTechniques(data.button);
                    }}
                    style={styles.cardTechniques}>
                    <>
                    {chooseButton === i ? <IconCheck style={{position:'absolute',right:10,bottom:"10%",zIndex:1}} /> : ""}
                      <Image
                        style={styles.imageOptimism}
                        resizeMethod="scale"
                        resizeMode="cover"
                        source={data.src}
                      />
                      <Image
                        style={{
                         ...styles.imageBackdrop,
                          display: `${chooseButton === i ? 'none' : 'flex'}`,
                        }}
                        resizeMethod="scale"
                        resizeMode="cover"
                        source={require('../../../assets/images/techniqueBackgrounds/backdrop.png')}
                      />
                      <Box
                        style={styles.buttonTechnique}>
                        <Text
                          style={{
                            fontSize: 14,
                            fontWeight: 'bold',
                            color: '#5D535C',
                          }}>
                          {data.button}
                        </Text>
                      </Box>
                    </>
                  </TouchableHighlight>
                );
              })}
            </Box>
          </Box>
        </ScrollView>
        <Box
          style={{
            position: 'absolute',
            bottom: '3%',
            width: '100%',
            alignItems: 'center',
          }}>
          <Button
            isDisabled={chooseButton !== undefined ? false : true}
            style={{
              ...styles.button2,
              backgroundColor: `${
                chooseButton !== undefined ? '#36A2D0' : '#6D7A82'
              }`,
            }}
            isLoadingText="Continue"
            spinnerPlacement="end"
            onPress={() =>{techniques === "Meditation" ? setHabitNavigation(4) : techniques === 'Breathe' ? setHabitNavigation(6) : setHabitNavigation(3)}}>
            <MaterialIcons
              name="arrow-forward-ios"
              style={{
                fontSize: 20,
                color: `${chooseButton !== undefined ? 'white' : 'black'}`,
              }}
            />
          </Button>
        </Box>
      </Box>
    </>
  );
}
1 Answers

Instead of setting individual id to your state, you add your id to an array then set that array to your state.

    onPress={() => {
            let newArray = [...chooseButton, i];
            setChooseButton(newArray),
            setTechniques(data.button);
    }}

You then use that array to conditionally render your IconCheck by checking if the id exists in the chooseButton array.

Related