React Native, One Button with Three Names on Each Click

Question

I have this code which change the button's name from (KEYWORD) to different one (KEYNOS) each time I click on it. How can I make it to change to third value (KEYCH). where the default name is (A, B, C... etc) and the first click shows Numbers (1,2...etc) and second click shows the Roman Number (I, II ... etc). I've created three Lists for Latin Letters, Numbers and Roman Numbers.

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';

const KEYWORDS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K'];
const KEYNOS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
const KEYNCH = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
export default class App extends Component {
  state = {
    keywordsList: [],
    keynosList: [],
    keychList: [],
  };

  toggleKeyword = keyword => {
    const { keywordsList } = this.state;
    let list = keywordsList;
    let index = -1;
    if ((index = keywordsList.indexOf(keyword)) != -1) {
      list.splice(index, 1);
    } else {
      list.push(keyword);
    }
    this.setState({ keywordsList: list });
  };

  render() {
    const { keywordsList } = this.state;
    const { container, selectedKeywordStyle, buttonStyle, textStyle } = styles;
    return (
      <View style={container}>
        {KEYWORDS.map((item, index) => {
          let style, text;

          if (keywordsList.find(element => element === item)) {
            style = selectedKeywordStyle;
            text = KEYNOS[index];
          } else {
            style = buttonStyle;
            text = item;
          }

          return (
            <TouchableOpacity
              key={index} // make sure you assign a unique key for each item
              style={style}
              onPress={() => this.toggleKeyword(item)}>
              <Text style={textStyle}>{text}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
    paddingTop: 50,
  },
  textStyle: {
    color: 'white',
    fontSize: 16,
    padding: 8,
    textAlign: 'center',
  },
  buttonStyle: {
    width: '30%',
    backgroundColor: 'green',
    borderRadius: 15,
    margin: 5,
  },
  selectedKeywordStyle: {
    width: '30%',
    backgroundColor: 'red',
    borderRadius: 15,
    margin: 5,
  },
});

Answer 1

I got something working by using a different approach and data structure:

import React, {Component} from 'react';
import {Text, View, StyleSheet, TouchableOpacity} from 'react-native';

const DATA = [
  ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'K'],
  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
  ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'],
];

const defaultKeys = Array.apply(null, Array(10)).map(
  Number.prototype.valueOf,
  0,
);

function getStyleForKey(key) {
  const colors = ['green', 'red', 'blue'];
  return {...styles.defaultButtonStyle, backgroundColor: colors[key]};
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keys: defaultKeys,
    };
  }

  toggleKeyword = (key, index) => {
    let tempKeys = [...this.state.keys];
    if (key < DATA.length - 1) {
      tempKeys[index]++;
    } else {
      tempKeys[index] = 0;
    }
    this.setState({keys: tempKeys});
  };

  render() {
    const {keywordsList} = this.state;
    const {container, selectedKeywordStyle, buttonStyle, textStyle} = styles;
    return (
      <View style={container}>
        {this.state.keys.map((key, index) => {
          let style = getStyleForKey(key);

          return (
            <TouchableOpacity
              key={index}
              style={style}
              onPress={() => this.toggleKeyword(key, index)}>
              <Text style={textStyle}>{DATA[key][index]}</Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    flexWrap: 'wrap',
    paddingTop: 50,
  },
  textStyle: {
    color: 'white',
    fontSize: 16,
    padding: 8,
    textAlign: 'center',
  },
  defaultButtonStyle: {
    width: '30%',
    backgroundColor: 'green',
    borderRadius: 15,
    margin: 5,
  },
});

So the idea is to create an array of keys where each key in the array has a value from 0 to DATA.length - 1. This array is stored in the state as keys in the example. The default value of keys is an array filled with the starting key 0 as many times as the number of items in a character set.

Then inside the render we loop through keys and for each key we use the value of that key to retrieve the correct character set from DATA and we select a specific character from that character set using the loop's current index.

The only thing the toggleKeyword function has to do now is to increment a key's value and check if the key has reached its 'max value' (Value before we go outside the bounds of the DATA array). When the key is its max value we reset the key's value to 0.