React Modals：模态组件只打开第一次点击的模态，没有其他

Question

I am new to StackOverflow so pardon me for bad wording of the problem. I am learning React currently and as a small project, I am creating a course-search app which will filter the courses on the basis of input entered by the user from a JSON file and display them. I have added modals to each card component which should open on the click of a button within the card. The problem I'm facing is that when I click the button, it only opens the modal first clicked one, and none else.

Here is the code:

import MyModal from '../Modal/Modal'

import courseList from "./courses.json";

class App extends Component {
  state = {
    search: "",
    modal: false,
  };

  selectModal = (id) => {
    this.setState({
      modal: {
        [id]: !this.state.modal
      }
    })
  }



  rendercourse = course => {
    var dep = course.dep;

    return (
      <div className="col-md-3" style={{ marginTop: "20px" }}>
        <Card className="card">
          <CardBody className={dep}>
            <CardTitle title={course.id}>
              {course.code}
            </CardTitle>
            <CardText className="title">{course.name}</CardText>
            <p className="ic">{course.ic}</p>
            Units: {course.unit}<br />
            <button onClick= {
              this.selectModal.bind(this, course.code)}>More Info</button>
            </CardBody>
            <MyModal 
            displayModal={this.state.modal[course.code]}
            coursename={course.name}
            coursecode={course.code}
            courseic={course.ic}
            coursedep={course.dep}
            courseunit={course.unit}
            closeModal={this.selectModal} />
        </Card>
      </div>
    );
  };

  onchange = e => {
    this.setState({ search: e.target.value });
  };

  render() {
    const { search } = this.state;
    const filteredcourses = courseList.filter(course => {
      return course.name.toLowerCase().indexOf(search.toLowerCase()) !== -1;
    });

    return (
      <div className="flyout">
        <main style={{ marginTop: "4rem" }}>
          <div className="container">
            <div className="row">
              <div className="col-12">
                <center>
                  <h3>
                    Search for a course
                  </h3>
                </center>
              </div>
              <div className="col">
                <Input
                  label="Enter the name of the course"
                  icon="search" className="in"
                  onChange={this.onchange}
                />
              </div>
              <div className="col" />
            </div>
            <div className="row">
              {filteredcourses.map(course => {
                return this.rendercourse(course);
              })}
            </div>
          </div>
        </main>

      </div>
    );
  }
}

export default App;

And here is the modal component:

const MyModal = props => {


function displayInfo () {
    return (
        <div>
            <div>{props.coursename}</div>
            <div>{props.courseic}</div>
            <div>{props.courseunit}</div>
            <div>{props.coursedep}</div>
            <div>{props.coursecode}</div>
        </div>

    );
  }

  function closeModal (e) {
    e.stopPropagation()
    props.closeModal()
  }

  let modal = (
      <div 
      className="modal"
      onClick={ closeModal }>

        <div className="modal-content"
          onClick={ e => e.stopPropagation() }>

          <span 
            className="close"
            onClick={ closeModal }>&times;
          </span>

          <div className="modal-flex">
            {displayInfo()}
          </div>

        </div>

      </div>
    )

    return ( props.displayModal ? modal : null);
}

export default MyModal;

I want the card-specific modal to open up whenever the button is clicked.

Answer 1

Your selectModal function doesn't flip the state of each modal, but only that of the first one. If any modal is defined in the state (be it the first or any other modal), this.state.modal will evaluate to true. (an object with at least some content is true)

To allow all your modals to be opened at the same time simply flip the value of the modal element in your modal state object.

this.state.modal[id] is undefined by default, which will evaluate to boolean false.

  selectModal = (id) => {
    this.setState({
      modal: {
        [id]: !this.state.modal[id]
      }
    })
  }

If you'd rather only open one modal at a time, you should simply store the id of your modal in the state instead of tracking all modals in there:

  selectModal = (id) => {
    this.setState({
      modal: id
    })
  }

To close a modal change your closeModal prop to pass undefined/false instead of the modal ID and change your modal display prop so it will perform the check whether your modal state and the coursecode match:

this.state.modal === course.code