I have a Parent ponent, App.js and a Child ponent, MealModal.js. When a user click on a specific meal card, it raises a modal that should display further information about the meal.

Hence I try to find a way to dynamically change the modals's data, depending on which meal card is clicked

I have tried to pass the id of the meal to the onClick={this.openModal} function and set the state of modalId is the function. But I got the following error:

Warning: Cannot update during an existing state transition (such as within render or another ponent's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to 'ponentWillMount'.

Here are my ponents so far:

App.js:

import React from 'react';

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


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

  };

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

  closeModal() {
    this.setState({modalIsOpen: false});
  };

  render() {
    return (
      <div>
        <MealsFilters/>
        <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>
        <MealsMap/>
      </div>
      <MealModal modalIsOpen={this.state.modalIsOpen} closeModal={this.closeModal} modalId={this.state.modalId}/>
    </div>
    );
  }
}

MealModal.js

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

const customStyles = {
  content : {
  }
};

Modal.setAppElement('#app')

export default class MealModal extends React.Component {
  constructor(props) {
    super(props);
  }


  render() {
    return (
      <Modal
        isOpen={this.props.modalIsOpen}
        onRequestClose={this.props.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.props.modalId}</h2>
            <h3>This is an awesome modal.</h3>
            <button onClick={this.props.closeModal}>close</button>
          </div>
        </div>
      </Modal>
    )
  }
}

Any idea on how I could do this ?

I have a Parent ponent, App.js and a Child ponent, MealModal.js. When a user click on a specific meal card, it raises a modal that should display further information about the meal.

Hence I try to find a way to dynamically change the modals's data, depending on which meal card is clicked

I have tried to pass the id of the meal to the onClick={this.openModal} function and set the state of modalId is the function. But I got the following error:

Warning: Cannot update during an existing state transition (such as within render or another ponent's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to 'ponentWillMount'.

Here are my ponents so far:

App.js:

import React from 'react';

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


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

  };

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

  closeModal() {
    this.setState({modalIsOpen: false});
  };

  render() {
    return (
      <div>
        <MealsFilters/>
        <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>
        <MealsMap/>
      </div>
      <MealModal modalIsOpen={this.state.modalIsOpen} closeModal={this.closeModal} modalId={this.state.modalId}/>
    </div>
    );
  }
}

MealModal.js

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

const customStyles = {
  content : {
  }
};

Modal.setAppElement('#app')

export default class MealModal extends React.Component {
  constructor(props) {
    super(props);
  }


  render() {
    return (
      <Modal
        isOpen={this.props.modalIsOpen}
        onRequestClose={this.props.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.props.modalId}</h2>
            <h3>This is an awesome modal.</h3>
            <button onClick={this.props.closeModal}>close</button>
          </div>
        </div>
      </Modal>
    )
  }
}

Any idea on how I could do this ?

• javascript
• reactjs
• meteor
• react-modal

2 Answers 2

Ok so I found the solution:

First, I changed onClick={this.openModal} in the parent oponent to onClick= () => {this.openModal}

Second, I add the id as a parameter: onClick= () => {this.openModal(i)}

Finally: update the openModal function:

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

And it works.

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

and modify the call function as

 <div className="col-sm-6 col-xs-12" key={i} onClick={() => this.openModal(x) } >
    <MealCard/>      
 </div>