反应模态的奇怪行为

Question

I'm trying to build a quiz that uses react-modal to provides hints. I will need multiple modals inside the quiz. I'm new to React so it's quite possible that I'm making a simple mistake.

I'm not sure it matters, but I've built this using create-react-app .

My App.js looks like this:

import React, { Component } from 'react';
import HintModal from './hintModal';
import Modal from 'react-modal';
import './App.css';

Modal.setAppElement('#root');

class App extends Component {

  state = {
    modalIsOpen: false,
    hint: ''
  };

  openModal = (hint) => {
    this.setState({ modalIsOpen: true,  hint: hint });
  }

  closeModal = () => {
    this.setState({ modalIsOpen: false, hint: '' });
  }

  render() {
    return (
      <React.Fragment>
      <h1>Modal Test</h1>
      <h2>First Modal</h2>
      <HintModal 
        modalIsOpen={this.state.modalIsOpen}
        openModal={this.openModal}
        closeModal={this.closeModal}
        hint="mango"
      />
      <hr />
      <h2>Second Modal</h2>
      <HintModal 
        modalIsOpen={this.state.modalIsOpen}
        openModal={this.openModal}
        closeModal={this.closeModal}
        hint="banana"
      />
      </React.Fragment>
    );
  }
}

export default App;

hintModal.jsx looks like this:

import React, { Component } from 'react';
import Modal from 'react-modal';

const HintModal = (props) => {

    const {openModal, modalIsOpen, closeModal, hint} = props;

    return (
        <React.Fragment>
            <button onClick={ () => openModal(hint) }>Open Modal</button>
            <Modal
                isOpen={modalIsOpen}
                onRequestClose={closeModal}
                contentLabel="Example Modal"
            >
                <h2>Hint</h2>
                <p>{hint}</p>
                <button onClick={closeModal}>Close</button>
            </Modal>
            <p>We should see: {hint}</p>
         </React.Fragment>
    );

};

export default HintModal;

Here's the problem: I need the content of the modal to change based on the hint prop passed to HintModal. When I output hint from outside <Modal> , it behaves as expected, displaying the value of the prop. But when I output hint within <Modal> , it returns "banana" (the value of the hint prop for the second instance of HintModal) when either modal is activated.

Any help would be greatly appreciated!

Answer 1

You are controlling all of your modals with the same piece of state and the same functions to open and close the modal.

You need to either have just one modal and then dynamically render the message inside it or you need to store a modalIsOpen variable in your state for every single modal.