Блог

Я создаю приложение, которое позволяет сотрудникам бронировать оборудование в нашем магазине. Когда мы нажимаем кнопку «Забронировать», я использую reactstrap для открытия модального, чтобы сотрудник мог добавить дополнительную информацию. Когда открывается модальный, я хочу, чтобы название элементов было в модальном заголовке, но по какой-то причине, когда я использую .map() , оно дает всем модальным элементам одинаковый заголовок, но .map() работает для всего остального?

Чтобы сэкономить ваше время, ошибка возникает только в этом разделе кода:

 <ModalHeader toggle={this.toggle}>
  {item.name}
</ModalHeader>
  

Я не уверен, в чем проблема, и хотел бы получить любую помощь, которую я могу получить!

 {events.map(item => {
  if (item.isBooked === true) {
    return (
      <div className="col-md-4 item p-2">
        <img className="item-img-booked" src={item.img} alt="" />
        <br />
        <br />
        <h6 className="text-center">{item.name}</h6>
        <button className="btn btn-success btn-sm m-1">Return</button>
      </div>
    );
  } else
    return (
      <div className="col-md-4 item p-2">
        <img className="item-img" src={item.img} alt="" />
        <br />
        <br />
        <h6 className="text-center">{item.name}</h6>
        <Button color="danger" onClick={this.toggle}>
          Book Out
        </Button>
        <div>
          <Modal isOpen={this.state.modal} toggle={this.toggle}>
            <ModalHeader toggle={this.toggle}>
              {item.name}
            </ModalHeader>
            <ModalBody>
              Lorem ipsum dolor sit amet, consectetur adipisicing
              elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat
              non proident, sunt in culpa qui officia deserunt mollit
              anim id est laborum.
            </ModalBody>
            <ModalFooter>
              <Button color="primary" onClick={this.toggle}>
                Confrim
              </Button>
              {" "}
              <Button color="secondary" onClick={this.toggle}>
                Cancel
              </Button>
            </ModalFooter>
          </Modal>
        </div>
      </div>
    );
  }
)}
  

Вместо того чтобы создавать модальность для каждого элемента, переместите модальность за пределы .map() и сохраните ваши элементы в состоянии. Передайте индекс каждого элемента в toggle функцию и используйте этот индекс, чтобы получить имя элемента из событий в состоянии like this.state.events[index] . Ваш модал извлекет имя из состояния.

 import React, { Component } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export class EventsAll extends Component {
  state = {
    modal: false,
    index: -1,
    events: [],
    name: ""
  };

  toggle = index => {
    const ind = typeof index !== "number" ? -1 : index;

    this.setState(
      prevState => ({
        modal: !prevState.modal,
        index: ind
      }),
      () => {
        this.populateModalData();
      }
    );
  };

  populateModalData = () => {
    if (this.state.index < 0 || typeof this.state.index !== "number") {
      return;
    }

    const item = this.state.events[this.state.index];

    this.setState({
      name: item.name
    });
  };

  componentDidMount = () => {
    const { events } = this.props.events;

    this.setState({
      events: events
    });
  };

  render() {
    return (
      <div>
        <div className="row">
          {this.state.events.map((item, index) => {
            if (item.isBooked === true) {
              return (
                <div className="col-md-4 item p-2">
                  <img className="item-img-booked" src={item.img} alt="" />
                  <br />
                  <br />
                  <h6 className="text-center">{item.name}</h6>
                  <button className="btn btn-success btn-sm m-1">Return</button>
                </div>
              );
            } else
              return (
                <div className="col-md-4 item p-2">
                  <img className="item-img" src={item.img} alt="" />
                  <br />
                  <br />
                  <h6 className="text-center">{item.name}</h6>
                  <Button
                    val={index}
                    color="danger"
                    onClick={() => this.toggle(index)}
                  >
                    Book Out
                  </Button>
                  <div />
                </div>
              );
          })}
        </div>

        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>{this.state.name}</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>
              Confrim
            </Button>{" "}
            <Button color="secondary" onClick={this.toggle}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default EventsAll;
  

рабочая демо-версия

Я предполагаю, что ваша функция переключения объединяет все модальности вместе, поэтому, где бы вы ни щелкнули, вам виден только последний модальный.

Попробуйте использовать массив для переключения состояния модальной видимости.

Я не полностью прочитал ваш вопрос, но из названия я предполагаю, что ваша проблема в том, что вы не используете key атрибут для своих компонентов, и когда item.isBooked изменения, ваши компоненты также не меняются.

Итак, попробуйте это: измените events.map(item => { на events.map((item, index) => { , чтобы генерировать уникальный ключ каждый раз, когда map отображает элемент из events . И для ваших div внутренних функций возврата сделайте это: <div className="col-md-4 item p-2" key={index}>
<div className="col-md-4 item p-2" key={index}>