我怎样才能一个接一个地取出排列的元素？在Reactjs中的div内

这是用钩子做的 我想一个接一个地展示这个安排的要素

我想在整体结果中表达出来。（因此，位于底部。） 也许我想要的是“减少大量代码”

我应该用什么？ 使用上下文？用户教育者？还是有更简单的方法？我是初学者。让我知道。大师

const Container = () => {
      const compoFunc = () => {
        const friendsContainer = {
          title: ["HBD", "Friends", "Chennel"],
          content: [
            "your friend's BD",
            "Meet new friends",
            "My chennel",
          ],
          num: [5, 100, 23],
        };
        return (
          <>
            <FriendsMain>
             
                <div>{friendsContainer.title}</div>
             
                <FriendsFront>
                  <div>{friendsContainer.content}</div>
                </FriendsFront>

                <FriendsRear>{friendsContainer.num}</FriendsRear>

            </FriendsMain>
          </>
        );
      };
    
      return (
        <div>
          <FriendContainer>
            <div> // I want to put friendsContainer's arrangement one by one here... By turns
              {compoFunc()}<-- HBD, your friend's BD, 5
              {compoFunc()}<-- Friends, Meet new friends, 100
              {compoFunc()}<-- Chennel, My chennel, 23
            </div>
          </FriendContainer>
        </div>
      );
    };
    
    export default Container;

const容器=（）=>{
常量compoFunc=（）=>{
常数friendsContainer={
标题：[“哈佛商学院”、“朋友”、“陈内尔”]，
内容：[
“你朋友的BD”，
“结识新朋友”，
“我的陈内尔”，
],
数字：[51023]，
};
返回(
{friendsContainer.title}
{friendsContainer.content}
{friendsContainer.num}
);
};
返回(
//我想把朋友们的安排一个接一个地放在这里…轮流放
{compoFunc（）}
将
friendsContainer
移动到状态或某个
容器
组件级变量
将数据映射到JSX
示例代码：

const Container = () => {
  const [data] = useState({
    title: ["HBD", "Friends", "Chennel"],
    content: ["your friend's BD", "Meet new friends", "My chennel"],
    num: [5, 100, 23]
  });

  return (
    <div>
      <FriendContainer>
        <div>
          {Object.values(data.title).map((title, i) => (
            <FriendsMain>
              <div>{title}</div>
              <FriendsFront>
                <div>{data.content[i]}</div>
              </FriendsFront>

              <FriendsRear>{data.num[i]}</FriendsRear>
            </FriendsMain>
          ))}
        </div>
      </FriendContainer>
    </div>
  );
};

const容器=（）=>{
常量[数据]=使用状态({
标题：[“哈佛商学院”、“朋友”、“陈内尔”]，
内容：[“你朋友的BD”、“结识新朋友”、“我的陈内尔”]，
数字：[51023]
});
返回(
{Object.values（data.title）.map（（title，i）=>(
{title}
{data.content[i]}
{data.num[i]}
))}
);
};


您能否澄清什么是“一个接一个地显示安排的要素”意思？你只是想把你的状态映射到用户界面上吗？还是想一次只显示一个条目并循环浏览它们？你的预期结果有点不清楚。@drewerese我更正了我的问题。如果你还不明白，请问我其他问题。
const Container = () => {
  const [data] = useState({
    title: ["HBD", "Friends", "Chennel"],
    content: ["your friend's BD", "Meet new friends", "My chennel"],
    num: [5, 100, 23]
  });

  return (
    <div>
      <FriendContainer>
        <div>
          {Object.values(data.title).map((title, i) => (
            <FriendsMain>
              <div>{title}</div>
              <FriendsFront>
                <div>{data.content[i]}</div>
              </FriendsFront>

              <FriendsRear>{data.num[i]}</FriendsRear>
            </FriendsMain>
          ))}
        </div>
      </FriendContainer>
    </div>
  );
};