Javascript 将不同的值从数组传递到组件

我的组件中有一个状态值不同的数组

我想动态地将数组的不同部分呈现给同一个组件，但呈现在我的react应用程序的不同页面上

i、 e将道具传递给组件，该组件在一个页面上呈现数组的第一个标题，然后在另一个页面上呈现第二个标题

有人能帮忙吗

import React from 'react';
import ChartItem from './chart-item.component.js'
import Popup from './modal/index.js'

//styles
import './chart-slides.styles.css'

class Chart extends React.Component {
  constructor() {
    super();

    this.state = {
      sections: [
        {
          title: 'How do you compare to the competition?',
          id: 'chart1',
          iframeUrl: 'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
        },
        {
          title: 'Main drivers of positive sentiment sentiment are brand, service, and app exeprience. While bugs and security features are big drivers of negative sentiment',
          id: 'chart2',
          iframeUrl: 'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
        },
        {
          title: 'Scroll through the feedback to see the pain points for customers',
          id: 'chart3',
          iframeUrl: 'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
        }
      ]
    };
  }


  render() {
    return (
      <div>
        {this.state.sections.map(({ id, title, iframeUrl }) => (
          <ChartItem key={id} title={title} url={iframeUrl} />
        ))}
        <Popup/>
      </div>
    );
  }
}

export default Chart;

从“React”导入React；
从“./chart item.component.js”导入ChartItem
从“./modal/index.js”导入弹出窗口
//风格
导入“./图表幻灯片.样式.css”
类图表扩展了React.Component{
构造函数（）{
超级（）；
此.state={
章节：[
{
标题：“你与竞争对手相比如何？”，
id:'图表1'，
iframeUrl:'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
},
{
标题：“积极情绪的主要驱动因素是品牌、服务和应用程序卓越性。而漏洞和安全功能是消极情绪的主要驱动因素”，
id:'图表2'，
iframeUrl:'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
},
{
标题：“滚动浏览反馈以查看客户的痛点”，
id:'图表3'，
iframeUrl:'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
}
]
};
}
render（）{
返回(
{this.state.sections.map（{id，title，iframeUrl}）=>(
))}
);
}
}
导出默认图表；

如何在下面的组件中仅渲染数组的第一部分？下面的组件将显示在应用程序的多个页面中

import React from 'react';
import Popup from '../modal/index.js'
import { Heading } from 'rebass'
import './chart-slides.styles.css'
import Iframe from 'react-iframe'

const ChartItem = ({ title, iframeUrl, id }) => (
  <div>
    <a className="demo-btn" id="demo-btn-chart1" href="https://app.hubspot.com/meetings/jack123/presentation" target="_blank" rel="noopener noreferrer"> Book Demo</a>
      <Heading fontSize="2.8vh" textColor="secondary" className="mobile-chart-title" as='h1'>
        {title}
      </Heading>
      <Iframe
        url={iframeUrl}
        className="iframe-container"
      />
  </div>
);

export default ChartItem

从“React”导入React；
从“../modal/index.js”导入弹出窗口
从'rebass'导入{Heading}
导入“./图表幻灯片.样式.css”
从“反应Iframe”导入Iframe
常量ChartItem=（{title，iframeUrl，id}）=>(
{title}
);
导出默认图表项

为什么

章节

是一种状态？你想要达到的目的是什么？如果要渲染一个部分，请不要映射所有部分，而只映射所需的部分。@DennisVash-能否详细说明如何仅映射数组的一部分？这是通过切片还是过滤函数完成的？我希望有一个数组，其中包含我的数据，并将其传递给同一个组件，但在我的应用程序的不同部分中包含数组中的不同元素。我计划将来用API实时上传数据。你应该在问题正文中解释，是的，你可以过滤然后映射