display React-Native modal array

Question

Hello, I am developing an app for the internship and the supervisor asked that in the search field, the user has the option to choose which field to search for. I thought of making a modal with the search options. However, when I will display the options (which comes within an array) it does not show. I tried to use foreach and map and still it does not show.

modal.js:

import React from 'react';

import {
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

export default ({showModal, toggle, options, changeSearchField}) => {
  const changeField = (option, i) => {
    changeSearchField({option, i});
  };

  return (
    <View style={styles.centeredView}>
      <Modal animationType="slide" transparent={true} visible={showModal}>
        <View style={{...styles.centeredView, backgroundColor: '#000000aa'}}>
          <View style={styles.modalView}>
            {options.forEach((option, i) => {
              <TouchableOpacity onPress={changeField(option, i)}>
                <Text>{option}</Text>
              </TouchableOpacity>;
            })}
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    width: 200,
    height: 200,
  },
  openButton: {
    backgroundColor: '#F194FF',
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  textStyle: {
    color: '#000000',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  modalText: {
    marginBottom: 15,
    textAlign: 'center',
  },
});

Patient.js:

import React, {useEffect, useState} from 'react';
import {RefreshControl} from 'react-native';
import {useNavigation} from '@react-navigation/native';

import {
  Container,
  Scroller,
  HeaderArea,
  SearchButton,
  HeaderTitle,
  SearchArea,
  SearchInput,
  ListArea,
  ChooseField,
} from './styles';
import SearchIcon from '../../../assets/icons/search.svg';
import ChooseFieldIcon from '../../../assets/icons/chooseField.svg';
import {SearchIconColor} from '../../../assets/styles';
import Card from '../../../components/PatientCard';
import LoadingComponent from '../../../components/Loading';
import EmptyDataCard from '../../../components/EmptyDataCard';
import {showMessage} from 'react-native-flash-message';
import DataErrorCard from '../../../components/DataErrorCard';
import {checkState} from '../../../assets/functions';
import Api from '../../../services/patient';
import Modal from '../../../components/Modal';

export default () => {
  const navigation = useNavigation();

  const [searchText, setSearchText] = useState('');
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const [emptyData, setEmptyData] = useState(false);
  const [dataError, setDataError] = useState(false);
  const [searchField, setSearchField] = useState('');
  const [modalVisible, setModalVisible] = useState(false);
  const [options, setOptions] = useState(['prontuario', 'nome', 'celular']);

  const search = async () => {
    if (emptyData) {
      setEmptyData(false);
    }

    if (dataError) {
      setDataError(false);
    }

    if (searchText == '') {
      setEmptyData(!checkState(list));
      showMessage({
        message: 'Digite o prontuario do paciente',
        type: 'warning',
        icon: 'warning',
      });
    } else {
      setLoading(true);

      let response = await Api.getByProntuario(searchText);

      if (response != 'error') {
        if (Object.keys(response).length === 0) {
          setLoading(false);
          setEmptyData(true);
          setList(response);
        } else {
          setLoading(false);
          setList(response);
        }
      } else {
        showMessage({
          message: 'Erro ao tentar listar',
          type: 'danger',
          icon: 'danger',
        });
        setLoading(false);
        setDataError(true);
        setList([]);
      }
    }
  };

  const getData = async () => {
    setLoading(true);
    let response = await Api.getAll();

    if (response != 'error') {
      if (Object.keys(response).length === 0) {
        setLoading(false);
        setEmptyData(true);
        setList(response);
      } else {
        setLoading(false);
        setList(response);
      }
    } else {
      setLoading(false);
      showMessage({
        message: 'Erro ao tentar listar',
        type: 'danger',
        icon: 'danger',
      });
      setDataError(true);
    }
  };

  const onRefresh = () => {
    if (emptyData) {
      setEmptyData(false);
    }

    if (dataError) {
      setDataError(false);
    }

    setRefreshing(false);
    getData();
    setSearchText();
  };

  useEffect(() => {
    getData();
  }, []);

  const handleClick = (id) => {
    navigation.navigate('PatientDetails', {id});
  };

  const selectSearchField = () => {
    setModalVisible(!modalVisible);
  };

  const changeSearchField = (option) => {
    console.log(option);
  };

  return (
    <Container>
      {!loading && (
        <Scroller
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
          }>
          <Modal
            showModal={modalVisible}
            toggle={selectSearchField}
            options={options}
            changeSearchField={changeSearchField}
          />
          <HeaderArea>
            <HeaderTitle>Pacientes</HeaderTitle>
          </HeaderArea>
          <SearchArea>
            <SearchInput
              placeholder="Digite o prontuario do paciente"
              placeholderTextColor="#000000"
              value={searchText}
              onChangeText={(t) => {
                setSearchText(t);
              }}
              keyboardType="numeric"
            />
            <SearchButton onPress={search}>
              <SearchIcon with="24" height="24" fill={SearchIconColor} />
            </SearchButton>

            <ChooseField onPress={selectSearchField}>
              <ChooseFieldIcon fill={SearchIconColor} />
            </ChooseField>
          </SearchArea>

          {emptyData && (
            <EmptyDataCard
              message="Nenhum paciente encontrado"
              subMessage="Arraste para baixo para baixo para atualizar a tela"
            />
          )}

          {dataError && (
            <DataErrorCard
              message="Ocorreu um erro ao tentar listar as informações"
              subMessage="Arraste para baixo para baixo para atualizar a tela"
            />
          )}

          {!loading && (
            <ListArea>
              {list.map((item, k) => (
                <Card
                  key={k}
                  data={item}
                  onPress={() => handleClick(item.id)}
                />
              ))}
            </ListArea>
          )}
        </Scroller>
      )}
      {loading && <LoadingComponent />}
    </Container>
  );
};

Answer 1

I managed to solve my problem using the map. Follow the code:

{options.map((option, i) => (
  <TouchableOpacity key={i} onPress={() => changeField(option, i)}>
    <Text>{option}</Text>
  </TouchableOpacity>
 ))}

Answer 2

Maybe this is it, ta without the Return.

{options.forEach((option, i) => {
     return (
              <TouchableOpacity onPress={() => changeField(option, i)}>
                <Text>{option}</Text>
              </TouchableOpacity>;
     )
 })}