CODEWITHSUNDEEP
reactjsreact-native
Charl
Charl

Reputation: 155

Cant close modal triggered from parent component

I am triggering a react-native modal from a parent component, the modal shows up, when I try close the modal with a button in the child component / model itself, nothing happens.

Any help would be appreciated.

This is in child component 

state = {
  display: false,
};

setModalVisible(visible) {
  this.setState({display: visible});
}

onPress={() => {
  this.setModalVisible(!this.state.display);
}}

This is in parent component 

<DisplayModal display={this.state.display} />


triggerModal() {
  this.setState(prevState => {
   return {
     display: true
     };
  });
}

this.triggerModal()

Upvotes: 4

Views: 408

Answers (4)

Vencovsky
Vencovsky

Reputation: 31713

You should negate the modal value to open and close it

triggerModal() {
  this.setState(prevState => {
   return {
     display: !prevState.display
     };
  });
}

And instead of passing the state to setModalVisible, you can just use the callback setState.

setModalVisible() {
  this.setState(prevState => ({display: !prevState.display}));
}

onPress={() => {
  this.setModalVisible();
}}

Edit:

You added your code and here is something that might be the problem

ADD_DETAILS(index) {
    if (index === 0) {
        console.log("clicked 0");
        this.triggerModal();
        console.log(this.state.display);
    }
}

The reason why it doesn't open and closes can be because it doesn't pass that if condition.

Edit 2:

Now I see your problem, what you need to do is call triggerModal in the children.

So here is what you need to do

  1. Pass triggerModal as props to the children
  2. Call it when you want to close the modal.

So here is the change in the parent.

<DisplayModal display={this.state.display} triggerModal={this.triggerModal}/>

And in the child

onPress={() => {
  this.props.triggerModal();
}}

Upvotes: 2

Mohammed Al-Reai
Mohammed Al-Reai

Reputation: 2816

at first inital 

state ={
  display: false}

create function handalepress

handalePress=()=>{
this.setState({
display:!this.state.display
}
<DisplayModal onClick= {this.handalePress}display={this.state.display} />

Upvotes: 0

Andrei Gătej
Andrei Gătej

Reputation: 11979

This is how I approached it:

function App() {
  const [showModal, setShowModal] = useState(true);

  const closeModal = () => setShowModal(false);

  const activateModal = () => setShowModal(true);

  return showModal ? (
    <DisplayModal closeModal={closeModal} display={showModal} />
  ) : (
    <button onClick={activateModal}>Display modal!</button>
  );
}

const DisplayModal = props =>
  props.display ? (
    <>
      <div>Display!!</div>
      <button onClick={props.closeModal}>Hide!</button>
    </>
  ) : null;

Pay no attention to hooks, just notice the pattern I have used, passing the closeModal function as a prop and calling it whenever it is the case, but from the child component.

Upvotes: 0

B. Mohammad
B. Mohammad

Reputation: 2464

try this:

in parent =>

state = {
  display: false,
};


setModalVisible() {
  this.setState({display: !this.state.display});
}

<DisplayModal handlePress = this.setModalVisible.bind(this) display={this.state.display} />

then in child:

onPress={() => {
  this.props.handelPress();
}}

Upvotes: 0

Related Questions