can't render react-modal as reusable component

Question

I have an app with a list of meal, and clicking on a meal should make a modal appear on the screen with further information about the meal.

So I am trying to code a basic modal as a reusable component using the react-modal package.

However when I try to 'activate' the modal it does not work. the openModal method does get fired but the modal does not show up on the screen.

App.js:

import React from 'react';

import MealCard from './MealCard';
import MealModal from './MealModal';


export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      modalIsOpen: false
    }
    this.openModal = this.openModal.bind(this);

  };

  openModal() {
    this.setState({modalIsOpen: true});
    console.log(this.state.modalIsOpen);
  }

  render() {
    return (
      <div>
        <div className="app-wrapper" style={{display: 'flex'}}>
          <div className="container">
            <div className="row">
              {[...Array(20)].map((x, i) =>
                  <div className="col-sm-6 col-xs-12 " key={i} onClick={this.openModal}>
                    <MealCard />
                  </div>
                )}
          </div>
        </div>
      </div>
      <MealModal isOpen={this.state.modalIsOpen}/>
    </div>
    );
  }
}

MealModal.js

import React from 'react';
import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

Modal.setAppElement('#app')

export default class MealModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalId: 0,
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  componentWillMount() {
    this.setState({modalId: 3})
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }
  render() {
    return (
      <Modal
        isOpen={this.props.modalIsOpen}
        onRequestClose={this.closeModal}
        style={customStyles}
        contentLabel="Meal Modal"
      >
        <div className="modal-wrapper">
          <div className="container text-center">
            <h1>Hello</h1>
            <h2>ID of this modal is {this.state.modalId}</h2>
            <h3>This is an awesome modal.</h3>
            <button onClick={this.closeModal}>close</button>
          </div>
        </div>
      </Modal>
    )
  }
}

Radix · Accepted Answer · 2018-07-24T20:21:06.057

2

You're passing isOpen as props and using modalIsOpen (props) in MealModal component.

As mentioned in the comment, you can just use isOpen={this.props.isOpen}. There's no sense to use two states for serving the same purpose, one is modalIsOpen in App component and other is modalIsOpen in MealModel component

edited Jul 24 '18 at 20:21

answered Jul 24 '18 at 19:55

Radix

2,527
1
19
43

OK, thank you for your answer ! so how should I change this ? should I just put `isOpen={this.state.modalIsOpen}` in `MealModal.js` ? – Uj Corb Jul 24 '18 at 19:58
1

@JulesCorb Write `isOpen={this.props.isOpen}` in `MealModal.js` – Tholle Jul 24 '18 at 20:01
oh yeah right got it ! it does work now thank you :) – Uj Corb Jul 24 '18 at 20:01
You can just use `isOpen={this.props.isOpen}`. There's no sense to use two states for serving the same purpose, one is `modalIsOpen` in `App` component and other is `modalIsOpen` in `MealModel` component. – Radix Jul 24 '18 at 20:01
@JulesCorb I hope the provided solution solves your issue. If that is the case then please [accept](https://meta.stackexchange.com/a/5235/362322) the answer as it is a SO way to say thanks. :) – Radix Jul 24 '18 at 20:11
1

@AtulKhanduri I just did ! had to wait a few minutes before being able to accept. You should edit your post and add Tholl's answer in case other people end up here with the same problem. Thank you very much for your help anyway :) – Uj Corb Jul 24 '18 at 20:18

can't render react-modal as reusable component

1 Answers1