Click on Button in child component only works once

Viewed 109

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:

Button state after clicked once

0 Answers
Related