我有一个滑块，当用户单击左或右按钮时，它会更改模态中显示的图像。我希望此滑块也能更改模态中显示的图像下面的说明
例如，假设这些是我的图像和描述：

['one.jpg','two.jpg']
['some text', 'other text']

当显示图像1时，其下方的文本应显示为“一些文本”
这是我的代码：

if (this.props.data) {
  const images = this.props.data.images;
  var description = this.props.data.description;
    if (this.props.data.images) {
      var img = images.map((elem, i) => {
        return <div key={i} data-src={elem} />;
      });
      var descr = description.map((elem, i) =>{
        return <div key={i}><p className="modal-description">{elem}</p></div>
      })
    }
  }
}
...
        <AwesomeSlider
          cssModule={[AwesomeSliderStyles, AwesomeSliderStyles2]}
          animation="scaleOutAnimation"
          className="slider-image"
        >
          {img}
        </AwesomeSlider>
      </div>
      <div className="col-md-10 mx-auto">
        <h3 style={{ padding: "5px 5px 0 5px" }}>
          {title}
          {url ? (
            <a
              href={url}
              target="_blank"
              rel="noopener noreferrer"
              className="link-href"
            >
              <i
                className="fas fa-external-link-alt"
                style={{ marginLeft: "10px" }}
              ></i>
            </a>
          ) : null}
        </h3>
        {descr}

这些是我的道具：

{
    "title": "Photography",
    "description": [
      "Personal project",
      "test"
    ],
    "images": [
      "p1.jpg",
      "p2.jpg"
    ]
  },
  {
    "title": "Test",
    "description": [
      "I've learned a lot!",
      "one"
    ],
    "images": [
      "images.jpg",
      "images.jpg"
    ]
  }