'How to get label and value from select child component

I am new using React Native and I did a component (nativebase Select) that is working fine, but I need to identify what object of this component is returning, to make a new Object with all the information I need to persist at the database

Select component

import React, { useState } from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

export default function BasicSelect(props) {
  const [value, setValue] = useState('');

  const handleChange = event => {
    alert(event.target.id);
    setValue(event.target.value);
  };

  return (
    <Box sx={{ minWidth: 300 }}>
      <FormControl fullWidth>
        <InputLabel id={props.labelId}>{props.labelName}</InputLabel>
        <Select
          key={props.labelId}
          labelId={props.labelId}
          id={props.labelId}
          value={value}
          label={props.labelName}
          onChange={handleChange}
        >
          {props.itemValue?.map((item, index) => {
            return (
              <MenuItem key={index} value={item}>
                {item}
              </MenuItem>
            );
          })}
        </Select>
        <div>valor selecionado {value}</div>
        {props.getSelectedValue(value)}
      </FormControl>
    </Box>
  );
}

Parent component

const getSelectedValue = (data, item) => {
  console.log('validar funcao >> ', data);
};

function App() {

  const selectValue = [
    {
      labelId: 'origin', // identificador do componente
      labelName: 'Origem', // nome que será exibido para o usuario
      itemValue: ['011', '013', '016'] // valores que serão apresentados no componente de select
    },
    {
      labelId: 'destiny',
      labelName: 'Destino',
      itemValue: ['011', '013', '016']
    },
    {
      labelId: 'time',
      labelName: 'Tempo',
      itemValue: ['10', '20', '30']
    },
    {
      labelId: 'plan',
      labelName: 'Plano FaleMais',
      itemValue: ['FaleMais 30', 'FaleMais 60', 'FaleMais 90']
    }
  ];

  return (
    <>
      <DenseTable />
      <Stack direction={'row'} spacing={2}>
        {selectValue?.map((item, index) => {
          return (
            <BasicSelect
              key={index}
              labelId={item.labelId}
              labelName={item.labelName}
              itemValue={item.itemValue}
              getSelectedValue={getSelectedValue}
            />
          );
        })}
        <CustomButton></CustomButton>
      </Stack>
    </>
  );
}
export default App;

I got how to send the property "taget.value" to the parent component, but how I can do to know that the value '011' comes from that Object origin and not from the 'destiny'?



Sources

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

Source: Stack Overflow

Solution Source