CODEWITHSUNDEEP
javascriptreact-native
Conrad
Conrad

Reputation: 23

Create function to change color of first index of Text node on button press - React Native

I am trying to create a function that when the "Add Letter" button is pressed, I want to change the color of the first letter, then the next press to change the second letter and so on until "SLVSH" has all letters changed

<View style={styles.player}>
        <View>
          <Text style={styles.playerName}>Conrad</Text>
          <View style={styles.slvshElements}>
            <Text style={styles.slvsh}>S</Text>
            <Text style={styles.slvsh}>L</Text>
            <Text style={styles.slvsh}>V</Text>
            <Text style={styles.slvsh}>S</Text>
            <Text style={styles.slvsh}>H</Text>
          </View>
        </View>
        <Pressable onPress={handleAddLetter} style={styles.buttonWrapper}>
          <Text style={styles.buttonText}>Add Letter</Text>
        </Pressable>
      </View>

New to React Native so not used to not being able to use querySelector etc.

Upvotes: 0

Views: 34

Answers (1)

wassim AJ
wassim AJ

Reputation: 458

Try the following:

import {Pressable, StyleSheet, Text, View} from 'react-native';
import React, {useState} from 'react';

const Example = () => {
  const [clickCount, setClickCount] = useState(0);

  const handleAddLetter = () => {
    setClickCount(clickCount + 1);
  };
  return (
    <View style={styles.player}>
      <View>
        <Text style={styles.playerName}>Conrad</Text>
        <View style={styles.slvshElements}>
          <Text style={[styles.slvsh, {color: clickCount >=1? 'red' : 'black' }]}>S</Text>
          <Text style={[styles.slvsh, {color: clickCount >=2? 'red' : 'black' }]}>L</Text>
          <Text style={[styles.slvsh, {color: clickCount >=3? 'red' : 'black' }]}>V</Text>
          <Text style={[styles.slvsh, {color: clickCount >=4? 'red' : 'black' }]}>S</Text>
          <Text style={[styles.slvsh, {color: clickCount >=5? 'red' : 'black' }]}>H</Text>
        </View>
      </View>
      <Pressable onPress={handleAddLetter} style={styles.buttonWrapper}>
        <Text style={styles.buttonText}>Add Letter</Text>
      </Pressable>
    </View>
  );
};

export default Example;

// your styles below
const styles = StyleSheet.create({
  playerName: {},
  slvshElements: {},
  slvsh: {},
  buttonWrapper: {},
  buttonText: {},
});

Upvotes: 1

Related Questions