Problem with teleporting with filter

Hi, everyone!
So, my problem is that i have a logic that i created to teleport (camera.position), according to a button click on a react component. The button click logic is set on the js file of babylon, with a forEach function and an eventListener. Without a filter everything goes right, but when i use the following logic to apply the filter , it only works before i type anything on the input, after the typing it doesn’t works.

{DataEstandeP.filter(stand => {
              if (searchStandName === '') {
                return stand
              } else if (stand.nome_da_empresa.toLowerCase().includes(searchStandName.toLowerCase())) {
                return stand
              }
              }).map(item => {
                return(
                      <Box className={styles.card} w="217px" h="106px" bg="#F4F4FB" borderRadius="16px" key={item.id}>
                      <Box className={styles.info} zIndex={5} borderRadius="16px">
                        <Center>
                            <Button mt="8" id={"telemp0"+item.id} border="1px solid #FFFFFF" _hover={{bg:"#FFFFFF", color:"#1c1c1c"}} className={styles.buttontel} fontSize={[9,11,15]} onClick={() => setShowMenuTeleporte(false)} bg="#ffffff00"  color="#FFFFFF" w="170px" h="40px" borderRadius="20px">
                              Visitar Stand
                            </Button>
                        </Center>
                        </Box>       
                        <Center zIndex="2" m="4" position="absolute">
                        <Avatar
                            borderRadius="full"
                            boxSize={["15px","20px","26px","56px"]}
                            name="J"
                            alt="J"
                            src={item.logo_empresa.url}
                              />
                          <Box ml="2">
                          <Text pb={1} fontWeight="800" color="#000000" textAlign="left" fontSize="13px"> {item.nome_da_empresa}</Text>
                          <Text pb={1} lineHeight="15px" color="#000000" textAlign="left" fontSize="13px"> {item.setor} </Text>
                          </Box>
                        </Center>                 
                      </Box>
                    )})}

I can not much more than this, because this is a document from the enterprise that i work, hope you guys could help me, thanks!

filter expects you pass a function that will return true or false depending on the fact the element should go in the final array or not.

So, I think you should use this instead:

DataEstandeP.filter(stand => {
    if (searchStandName === '') {
        return true;
    } else if (stand.nome_da_empresa.toLowerCase().includes(searchStandName.toLowerCase())) {
        return true;
    }
    return false;
})
1 Like

Hi, first thank you for your support, it didn’t work, same thing, the buttons just work on the first time, after writing anything on the input it does not work. Hope you have more ideias. :slight_smile: