Buttons - React Native

Question

I am displaying 3 tables with each having a button in the last column but the button set up makes them all connected and what I am trying to do is have the button function on the first table and the second table to have different wording and the alert to be different, and finally, I would like to delete the buttons from the final table, how can I do this? (screenshot below makes it a bit more clear to understand my terrible explanations).

Thank you

import React, { Component } from "react";
import { StyleSheet, View, Text, TouchableOpacity, Alert } from "react-native";
import { Table, TableWrapper, Row, Cell } from "react-native-table-component";
import styled from "styled-components";

export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead1: ["Name", "Amount(£)", "Ref", "Payment"],
      tableData1: [
        ["T. Walker", "870", "009", "d"],
        ["S. Weintraub", "650", "041", "d"],
        ["M. Clingan", "320", "021", "4"],
        ["S. Lucy", "1010", "034", "d"]
      ],
      tableHead2: ["Name", "Amount(£)", "Ref", "Send Invoice"],
      tableData2: [
        ["T. New", "870", "3", "d"],
        ["S. New", "650", "c", "d"],
        ["M. new", "320", "3", "4"],
        ["S. new", "1010", "c", "d"]
      ],
      tableHead3: ["Name", "Amount(£)", "Ref", "Date Due"],
      tableData3: [
        ["T. New 2", "870", "3", "d"],
        ["S. New 2", "650", "c", "d"],
        ["M. new 2", "320", "3", "4"],
        ["S. new 2", "1010", "c", "d"]
      ]
    };
  }

  static navigationOptions = {
    header: null
  };
  _alertIndex(index) {
    Alert.alert(`Payment Sent`);
  }

  render() {
    const state = this.state;
    const element = (data, index) => (
      <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>button</Text>
        </View>
      </TouchableOpacity>
    );

    return (
      <View style={styles.container}>
        <Title>Payments - Outgoing </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead1}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData1.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
        <Title>Payments - Due </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead2}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData2.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
        <Title>Payments - Overdue </Title>
        <Table borderStyle={{ borderWidth: 1 }}>
          <Row
            data={state.tableHead3}
            style={styles.head}
            textStyle={styles.text}
          />
          {state.tableData3.map((rowData, index) => (
            <TableWrapper key={index} style={styles.row}>
              {rowData.map((cellData, cellIndex) => (
                <Cell
                  key={cellIndex}
                  data={cellIndex === 3 ? element(cellData, index) : cellData}
                  textStyle={styles.text}
                />
              ))}
            </TableWrapper>
          ))}
        </Table>
      </View>
    );
  }
}
const Title = styled.Text`
  font-size= 16px;
  color: #b8bece;
  font-weight: 500;

  `;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
    paddingTop: 30,
    backgroundColor: "#f0f3f5",
    justifyContent: "space-around"
  },
  head: { height: 40, backgroundColor: "white" },
  text: { margin: 6 },
  row: { flexDirection: "row", backgroundColor: "white" },
  btn: {
    width: 58,
    height: 22,
    backgroundColor: "#4775f2",
    alignSelf: "center",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "black"
  },
  btnText: { alignSelf: "center", color: "black" }
});

Answer 1

I can't guarantee that this will work flawlessly, but there shouldn't be too many things to fix if something is wrong. I am just including the ExampleFour class because that is what I changed.

export default class ExampleFour extends Component {
  constructor(props) {
    super(props);
    this.titles = ["Payments - Outgoing", "Payments - Due", "Payments - Overdue"];
    this.state = {
      tableHead1: ["Name", "Amount(£)", "Ref", "Payment"],
      tableData1: [
        ["T. Walker", "870", "009", "T1B1"],
        ["S. Weintraub", "650", "041", "T1B2"],
        ["M. Clingan", "320", "021", "T1B3"],
        ["S. Lucy", "1010", "034", "T1B4"]
      ],
      tableHead2: ["Name", "Amount(£)", "Ref", "Send Invoice"],
      tableData2: [
        ["T. New", "870", "3", "T2B1"],
        ["S. New", "650", "c", "T2B2"],
        ["M. new", "320", "3", "T2B3"],
        ["S. new", "1010", "c", "T2B4"]
      ],
      tableHead3: ["Name", "Amount(£)", "Ref", "Date Due"],
      tableData3: [
        ["T. New 2", "870", "3", ""],
        ["S. New 2", "650", "c", ""],
        ["M. new 2", "320", "3", ""],
        ["S. new 2", "1010", "c", ""]
      ]
    };
  }

  static navigationOptions = {
    header: null
  };
  _alertIndex(index) {
    Alert.alert(`Payment Sent`);
  }

  render() {
    const state = this.state;
    const element = (data, index) => {
      if (!data) {
        return <></>;
      }
      return <TouchableOpacity onPress={() => this._alertIndex(index)}>
        <View style={styles.btn}>
          <Text style={styles.btnText}>data</Text>
        </View>
      </TouchableOpacity>;
    }

    return (
      <View style={styles.container}>
        {this.titles.map((title, tIndex) => {
          return (
            <React.Fragment>
              <Title>{title}</Title>
              <Table borderStyle={{ borderWidth: 1 }}>
                <Row
                  data={state[`tableHead${tIndex + 1}`]}
                  style={styles.head}
                  textStyle={styles.text}
                />
                {state[`tableData${tIndex + 1}`].map((rowData, rowIndex) => (
                  <TableWrapper key={rowIndex} style={styles.row}>
                    {rowData.map((cellData, cellIndex) => (
                      <Cell
                        key={cellIndex}
                        data={cellIndex === 3 ? element(cellData, index) : cellData}
                        textStyle={styles.text}
                      />
                    ))}
                  </TableWrapper>
                ))}
              </Table>
            </React.Fragment>
          );
        })}
      </View>
    );
  }
}