Estoy tratando de hacer que cuando se presiona un TouchableHighlight en reaccionar nativo, cambie de un color a otro. Tengo un estado que está configurado en falso y cambia cuando se presiona el botón. Sin embargo, esto cambia el color de todos los elementos del mapa en lugar de cambiar el color de cada elemento individualmente. ¿Hay alguna forma de actualizar el estado de cada elemento de forma independiente? Aquí está mi código:
function OnboardingVibes() { const [pressed, setPressed] = useState(false); return ( <View style={{marginTop: 40}}> <Text style={{fontSize: 22, color: '#FFF', marginBottom: 16}}>Vibes</Text> <View style={styles.buttonContainer}> {vibes.map((vibe) => { return ( <TouchableHighlight onPress={() => setPressed(true)} style={{backgroundColor: pressed ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}> <Text style={styles.vibeButton}>{vibe}</Text> </TouchableHighlight> ) })} </View> </View> ); }Una forma de hacerlo es mover el estado hacia abajo para poder tener estados individuales. Cuando el estado es true en el nivel superior, todos los componentes secundarios recibirán el mismo estado.
function TouchableVibe({vibe}) { const [pressed, setPressed] = useState(false); return ( <TouchableHighlight onPress={() => setPressed(true)} style={{ backgroundColor: pressed ? "#DDD" : "#4D2C5B", margin: 4, borderRadius: 4, }} > <Text style={styles.vibeButton}>{vibe}</Text> </TouchableHighlight> ); } function OnboardingVibes() { return ( <View style={{ marginTop: 40 }}> <Text style={{ fontSize: 22, color: "#FFF", marginBottom: 16 }}> Vibes </Text> <View style={styles.buttonContainer}> {vibes.map((vibe) => ( <TouchableVibe key={`vibe-${vibe}`} vibe={vibe} /> ))} </View> </View> ); }const [pressed, setPressed] = useState(vibes.map(e=>false)); {vibes.map((vibe, index) => { return ( <TouchableHighlight onPress={() => { let new_Pressed =vibes.map(e=>false) new_pressed[index]=true; setPressed(new_pressed); }} style={{backgroundColor: pressed[index] ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}> <Text style={styles.vibeButton}>{vibe}</Text> </TouchableHighlight> ) })}En lugar de pasar un booleano al estado, pase el id/vibe en su lugar, y luego en su lógica condicional dentro del map puede determinar si ese único elemento es el mismo en el que ha hecho clic.
function OnboardingVibes() { const [pressed, setPressed] = useState(''); return ( <View style={{marginTop: 40}}> <Text style={{fontSize: 22, color: '#FFF', marginBottom: 16}}>Vibes</Text> <View style={styles.buttonContainer}> {vibes.map((vibe) => { return ( <TouchableHighlight onPress={() => setPressed(vibe)} style={{backgroundColor: pressed === vibe ? '#DDD' : '#4D2C5B', margin: 4, borderRadius: 4}} key={`vibe-${vibe}`}> <Text style={styles.vibeButton}>{vibe}</Text> </TouchableHighlight> ) })} </View> </View> ); }