如何使用 react/react native 在单击时删除或隐藏多个组件

Question

https://res.cloudinary.com/catify/image/upload/v1588704903/hcnqjp7okfykkb3az2v3.jpg

Hello im trying to create a proyect of a guessing game, i have multiple components of letters as show in the image, some letters are needed for the answer and some are not, i need a button that when i click it it removes or hides the components that are not needed for the answer, how can i do this with react or react native?

Im saving the letters in a array and then rendering them using Map with a custom component that is styled to look like the photo, im doing it in react native but i think it should be the same in react, any help is welcome, thanks.

  return (
    <Animated.View style={{flex: 1}}>
      {Letters.forEach(element => {
        <LetterCard letter={element} />;
      })}

      <Button
        title="eliminar"
        onPress={() => {
          eliminar;
        }}
      />
    </Animated.View>
  );

Answer 1

You probably need a list in state or somewhere that holds which letters are needed and which aren't, as well as a boolean to determine if you are showing all letters or just your needed letters.

Your button which toggles to show/hide the unneeded letters would simply toggle the neededOnly state.

this.state={        
    neededLetters = [],   //array of needed letters
    neededOnly = false,
}

{neededOnly ? 
neededLetters.forEach(element => {
    <LetterCard letter={element} />;
}) : 
Letters.forEach(element => {
    <LetterCard letter={element} />;
})}


<Button
    title="eliminate"
    onPress={() => {
      this.setState(prevState => ({
      neededOnly: !prevState.neededOnly
    }));
/>