1

Tenho o seguinte código:

const Sounds: React.FC = () => {
  const [hasSelect, setHasSelect] = useState(false);

  return (
    <Container>
      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
        <Sound key={item.id} activeOpacity={0.7}>
          <MusicPic source={mushroom} />

    
          <AddSound onPress={() => setHasSelect(true)}>
            <ICon name="library-plus" color={hasSelect ? main : lighter} />
          </AddSound>
        </Sound>
        )}
      />
    </Container>

Estou tentando mudar a cor de ícone quando o usuário clica nele, porém todas os icones do FlatList tem o estado alterado, como faço pra alterar apenas o pressionado?

3
  • Você deseja selecionar um de cada vez ou pode mais de um ser selecionado ao mesmo tempo?
    – mico
    15/11/2020 às 11:09
  • Quem precisaria controlar esse estado é o <Sound>, não <Sounds>... Ou então controlaria pelo <Sounds> mas através de um array de boolean/objetos, não um único boolean 15/11/2020 às 11:45
  • Valeu Rafael, criei um componente separado pra cada Sound e passei as props por esse componente ai e deu tudo certo, muito obrigado
    – Nycollas
    15/11/2020 às 15:20

1 Resposta 1

3

Consegui resolver, é só criar um componente separado e chamar esse componente no rendeItem do flatlist passando as props

FlatList:

const Sounds: React.FC = () => {
  return (
    <Container>
      <TitleContainer>
        <Title>Biblioteca</Title>
      </TitleContainer>

      <FlatList
        data={data}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <Track
            id={item.id}
            source={item.image}
            music={item.music}
            artist={item.artist}
          />
        )}
      />
    </Container>
  );
}

Sound Componente:

function Track({ id, image, music, artist}: propsTypes) {
  const { main, lighter } = useContext(ThemeContext);
  const [hasSelect, setHasSelect] = useState(false);

  return (
    <Container key={id} activeOpacity={0.7}>
      <MusicPic source={image} />

      <InfoContainer>
        <Music>{music}</Music>
        <Artist>{artist}</Artist>
      </InfoContainer>

      <AddSound onPress={() => setHasSelect(true)}>
        <MaterialCommunityIcons name="library-plus" color={hasSelect ? main : lighter} />
      </AddSound>
    </Container>
  );
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .