React Native, State Changes, but Component Does not Properly Render - reactjs

Question

I am working on my first React Native app, but feel very comfortable with React and React Native, which had me surprised regarding this snag.
Goal - Allow users to dynamically create tabs based on their input needs. Each tab reuses the same component which is a form. On press, the tab should display its corresponding form. The form works fine.
The Problem - The parent component won't render the correct form on tab press. The state updates, but the component remains on the first component selected. If I list the forms on one screen, one after the other, I can see that filling out one form, has no effect on the others (desired effect).
If I don't render a form component, it will work on the first tab press. This makes me wonder if React is not registering a change in the parent component because the child is always a copy of the other child components I desire displayed.
I approached this problem three ways with no luck.
Creating an array of components stored in the parent components state. Creating a new tab pushes a form component into the current array in state by grabbing that array, pushing a component into it and reseting state with that new array. I store a key in state that updates on a screen press. That key matches with an index in the component array to show the selected component with its corresponding tab.
Using componentDidUpdate to set a displayed component on the screen press similar to above, but instead of keying into the array in my render function, in the componentDidUpdate function manually setting a displayedView on each update of the component and using that in render.
Currently (code to follow) - Creating unique keys in state for each tab added that stores the corresponding component and using that to decipher which component to display.
I decided to put a ref on some child components. I used console.log before render to see if that correct component was being selected for display. It showed it was, but it was not appearing that way on the screen. I also added the tab number being clicked to the UI and I can see my state updating properly on each tab press.
Any help would be appreciated. Last resort I am going to have a user select the amount of forms they want before reaching this view and create it based on that number, but I would prefer not to.
import React from 'react';
import { connect } from 'react-redux';
import { View, Text, TouchableOpacity } from 'react-native';
import CreateWorkoutSet from './CreateWorkoutSet';
import { Entypo } from '#expo/vector-icons';
class CreateWorkout extends React.Component {
constructor(props) {
super(props)
this.state = {
workoutSetTemplate0: <CreateWorkoutSet navigation={this.props.navigation}/>,
showTab: 0,
totalTabs: 0,
}
this.addWorkoutSetToGroup = this.addWorkoutSetToGroup.bind(this)
}
componentDidMount() {
this.setState({
tabs: [
<TouchableOpacity onPress={() => this.setState({ showTab: 0 })}>
{ this.state.showTab === 0 ? (
<View style={{ backgroundColor: 'red', height: 40, width: 40 }}>
<Text>Tab: 1</Text>
</View>
) :
<View style={{ backgroundColor: 'grey', height: 40, width: 40 }}>
<Text>Tab: 1</Text>
</View>
}
</TouchableOpacity>
],
showTab: 0
})
}
addWorkoutSetToGroup() {
let tabNumber = this.state.totalTabs + 1
let tabKey = `workoutSetTemplate${tabNumber}`
let tabs = this.state.tabs
tabs.push(
<TouchableOpacity onPress={() => this.setState({ showTab: tabNumber })}>
{ this.state.showTab === tabNumber ? (
<View style={{ backgroundColor: 'red', height: 40, width: 40 }}>
<Text>Tab: {tabNumber}</Text>
</View>
) :
<View style={{ backgroundColor: 'grey', height: 40, width: 40 }}>
<Text>Tab: {tabNumber}</Text>
</View>
}
</TouchableOpacity>
)
this.setState({ [tabKey]: <CreateWorkoutSet navigation={this.props.navigation} />, tabs: tabs, totalTabs: tabNumber })
}
render() {
let template = this.state[`workoutSetTemplate${this.state.showTab}`]
let tabs = this.state.tabs
return(
<View style={{flex: 1, justifyContent: 'center', marginTop: 20}}>
<View style={{ flexDirection: 'row' }}>
{tabs}
</View>
<View>
<Text>Add Exercise To Group</Text>
<TouchableOpacity onPress={()=> this.addWorkoutSetToGroup()}>
<Entypo name='circle-with-plus' size={36} color='red' />
</TouchableOpacity>
</View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('BlockDetail')}>
<Text>Blocks</Text>
</TouchableOpacity>
<Text>{this.state.showTab}</Text>
{template}
</View>
)
}
}
export default connect()(CreateWorkout)

Answer 1

Try calling
this.forceUpdate()
after updating the state