I have a Button inside a header component that can for some reason only be clicked once. In my HomeContainer I include a Header component. In that Header Component I included a button that should show another component when the button was clicked. This is working so far. But when I try to click the button again to change the displayed component again, the button is unclickable.
HomeContainer:
import React from "react";
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
} from "react-native";
import ButtonTest from "../../components/home/ButtonTest";
import RaidGroupOverview from "../../components/home/RaidGroupOverview";
import HeaderContainer from "../header/Header";
import AddRaidGroup from "../../components/home/AddRaidGroup";
class HomeContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
showAddRaidGroup: false,
};
this.parentFunction = this.parentFunction.bind(this);
}
parentFunction = (data_from_child) => {
console.log(data_from_child);
console.log(this.state.showAddRaidGroup);
this.setState({
showAddRaidGroup: this.state.showAddRaidGroup === true ? false : true,
});
console.log(this.state.showAddRaidGroup);
};
componentDidUpdate() {
console.log("I WILL UPDATE");
console.log(this.state.showAddRaidGroup);
}
render() {
return (
<View style={styles.container}>
<HeaderContainer functionCallFromParent={this.parentFunction} />
{!this.state.showAddRaidGroup ? (
<RaidGroupOverview />
) : (
<AddRaidGroup />
)}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight + 30 || 0,
},
item: {
backgroundColor: "#f9c2ff",
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default HomeContainer;
Inside that HomeContainer I include a Header component that includes the Button:
import React from "react";
import { Header } from "react-native-elements";
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
ScrollView,
ActivityIndicator,
} from "react-native";
import { ListItem, Icon } from "react-native-elements";
import ButtonTest from "../../components/home/ButtonTest";
class HeaderContainer extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.childFunction = this.childFunction.bind(this);
}
childFunction = (data) => {
this.props.functionCallFromParent(data);
};
componentDidUpdate() {
console.log("I WILL UPDATE");
}
render() {
return (
<Header
placement="center"
barStyle="light-content"
leftComponent={
<ButtonTest functionCallFromParent={this.childFunction} />
}
centerComponent={{ text: "test", style: { color: "#fff" } }}
rightComponent={{ icon: "home", color: "#fff" }}
containerStyle={{
backgroundColor: "#3D6DCC",
justifyContent: "space-around",
}}
/>
);
}
}
export default HeaderContainer;
And finally the button:
import React from "react";
import { ListItem, Icon, Button } from "react-native-elements";
import { Text, View } from "react-native";
class ButtonTest extends React.Component {
constructor(props) {
super(props);
this.state = {
clicked: false,
title: "Test",
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log("HI");
if (!this.state.clicked) {
this.setState({
clicked: true,
title: "Test1",
});
} else {
this.setState({
clicked: false,
title: "Test",
});
}
this.props.functionCallFromParent("Hello From Child1");
}
render() {
return (
<div>
<Button onPress={this.handleClick} title={this.state.title} />
</div>
);
}
}
export default ButtonTest;
I don´t understand why I can only click the button once. Any help would be great!
EDIT:
