Estoy haciendo un juego de tipo memoria como mi primer proyecto en React Native, pero tengo algunos problemas para volver a renderizar a los niños cuando el padre se actualiza.

El componente hijo:

 import React from "react"; import { Pressable } from "react-native"; export default class GameCard extends React.Component { render() { return( <Pressable style={[{backgroundColor: this.props.isOpen ? this.props.color : 'coral'}, styles.card]} onPress={this.props.handleClick} /> ) } } const styles = { card: { width: 77, height: 135, margin: 10, marginVertical: 30, } };

El padre:

 import React, {Component, useState} from "react"; import {generateCards} from '../data/cards.js' import Gamecard from "../components/GameCard.js"; import {FlatList, View, Text} from "react-native"; export default class Game extends Component { state = { score: 0, currentSelection: [], selectedPairs: [], cards: [] } componentDidMount() { this.setState({ cards:generateCards(), }) } handleClick = id => { let selectedPairs = [...this.state.selectedPairs]; let currentSelection = this.state.currentSelection; let score = this.state.score; let localCards = this.state.cards; if(currentSelection.length < 2 && !currentSelection.includes(localCards[id])) { currentSelection.push(localCards[id]); } localCards[id].isOpen = true; this.setState({ cards: localCards, currentSelection: currentSelection }) } renderGameCard = ({item}) => { return ( <Gamecard color={item.color} key={item.key} isOpen={item.isOpen} handleClick={this.handleClick.bind(this, item.key)} /> ) } renderFlatList () { let cardData = this.state.cards; return ( <View style={{justifyContent: 'center', alignItems: 'center'}}> <FlatList data={cardData} renderItem={this.renderGameCard} numColumns={4} extraData={this.state.currentSelection} /> </View> ) } render() { return this.renderFlatList(); } }

Básicamente, cuando se hace clic en uno de los niños, quiero cambiar su color de fondo y realizar algo de lógica.

El único problema es que el componente secundario no se vuelve a representar cuando se hace clic, aunque su propiedad isOpen se actualiza en el estado principal. ¿Alguien puede explicarme/ayudarme a resolver este problema? Gracias de antemano.