ページ番号付けコンポーネント、パスを見つけるためのマップ配列

Question

パスとIDを含むオブジェクトの配列を使用してページ番号コンポーネントを作成しようとしています。

import React from 'react'; 

export function PageNumber(props) { 

const pageData = [ 
{path: '/calc/1', id:1}, 
{path: '/calc/2', id:2}, 
{path: '/calc/3', id:3}, 
{path: '/calc/4', id:4}, 
{path: '/calc/5', id:5}, 
{path: '/calc/6', id:6}, 
{path: '/calc/7', id:7} 
] 

const CurrentPage = props.location.pathname; 
const numberOfPages = pageData.length; 

アレイをマップして現在のページのみを表示するにはどうすればよいですか？

return (
     <div>{   
      pageData.map(page => { 
       page.path == CurrentPage ? page.path : '' 

       <span>{page.path} of {numberOfPages}</span> 
      })} 
     </div> 
); 
} 

Answer 1

あなたの場合マッピングが必要ない場合があります。これを試してみてください：

const CurrentPage = props.location.pathname || pageData[0] ; 
return (
    <span>{CurrentPage.path} of {pageData.length}</span> 
);