React 渡された値によって、違う表示形式のリストを表示したい。値の渡し方、比較の仕方が正しく理解できてない。

Question

Railsで、ランキング情報とタグの一覧情報を表示しようとしています。
Material-UIのListAPIのなかで良さそうなものがあったので、それを改良して利用しようとしていました。

Railsのビューのなかで、

= react_component("List", { 
ranks: @ranks.as_json(only:[:title,:likes_count,:id]),
tags:  @tags.as_json(only: [:name,:id,:articles_count]) })

とし、

リストのデザインは共通で、リストの表示する中身は、ランキングとタグで
別々の物を表示しようと以下のようにしました。

import React from "react"
import VirtualizedList from "./VirtualizedList"

class List extends React.Component{
  render() {
    const tags = this.props.tags;
    const ranks = this.props.ranks;
    return(
        <div>
          <VirtualizedList items={tags}  name={"tag"}># Tag List</VirtualizedList>
          <VirtualizedList items={ranks} name={"rank"}># Ranking</VirtualizedList>
        </div> 
    );
  }
}

export default List

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import { FixedSizeList } from 'react-window';

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    height: 400,
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
}));

const TagListRow = (props) => 
  <ListItem button style={props.style} key={props.id}>
    <ListItemText>
      # {props.name} ({props.count})
    </ListItemText>
  </ListItem>;

const RankingRow = (props) =>
  <ListItem button style={props.style} key={props.id}>
    <ListItemText>
     {props.title} Like数:{props.count}
    </ListItemText>
  </ListItem>;


function renderRow(props) {
  const { data, index, style } = props;
  const name = props.name;
  if ( name ==  "rank" ) {
    return <RankingRow style={style} id={data[index].id} title={data[index].title} count={data[index].likes_count}/>;
  } else {
    return <TagListRow style={style} id={data[index].id} name={data[index].name} count={data[index].articles_count} />;
  }
}


export default function VirtualizedList(props) {
  const classes = useStyles();
  const items = props.items;
  const name = props.name;
  return (
    <div>
      <h3>{props.children}</h3>
      <div className={classes.root}>
        <FixedSizeList height={400} width={360} itemSize={46} itemCount={items.length} itemData={items} name={name} >
          {renderRow}
        </FixedSizeList>
      </div>
    </div>
  );
}

1,Listクラスで、VirtualizedListコンポーネントににnameのプロパティ を渡し、
2,VirtualizedList内では、受け取ったnameをFixedSizeListに同じくnameとして渡し、
3,renderRowの部分で受け取ったnameの中身が"rank"であるかどうかで比較し、その結果に対応したViewを出そうという考えです。

しかし、実際はrenderRow内の if (name == "rank")　の比較部分が上手くいっておらず、ランキングリストを表示しようとしてもタグリストとして評価されてしまいます。

値の渡し方が悪いのか、比較式の書き方が悪いのか、解決策が思いつかず、詰まりました。

どなたかご教授よろしくお願いします。

Answer 1

{renderRow} となっているところ、{renderRow(name)} ではないですか？

Comments

[amedama]

kit49wayコメントありがとうございます。
react-windowのFixedSizeList固有のデータの渡し方などがあり、それに乗っ取ったデータの取り扱い方がちゃんと理解できていませんでした。
itemCountで表示する個数を指定、itemDataで表示する配列渡す....など
kit494wayさんのアドバイスのどおりに、renderRow(name)とするとnameは渡せましたが、data,index,styleなどがrenderRowに渡らなかったので一階層上でnameの処理をすることにしました。正直なぜdata、indexなどが渡せなくなったのかまでは理解することができませんでした。
直接解決ではありまんが、kit494wayさんのアドバイスのおかげで違う角度から考えることができました。ありがとうございます。
自分の表現したいコードは書けましたので、参考になればと思い、コードを載せておきます。

Answer 2

表示したいrenderコンポーネントを種類別に用意します。(renderRowTag,renderRowRank)

VirtualizedList内で、受け取ったnameに応じて、用意したrenderコンポーネントを表示します。

import React from "react"
import VirtualizedList from "./VirtualizedList"

class List extends React.Component{
  render() {
    const tags = this.props.tags;
    const ranks = this.props.ranks;
    return(
        <div>
          <VirtualizedList items={tags}  name={"tag"}># Tag List</VirtualizedList>
          <VirtualizedList items={ranks} name={"rank"}># Ranking</VirtualizedList>
        </div> 
    );
  }
}

export default List

----import文省略---

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    height: 400,
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
}));

function renderRowRank(props) {
  const { data, index, style } = props;
  console.log(data.rank[index].title);
  return (
    <ListItem button style={style} key={index} >
      <ListItemText primary={"No" + (index + 1) + data.rank[index].title + data.rank[index].likes_count} />
    </ListItem>
  );
}

function renderRowTag(props) {
  const { data, index, style } = props;
  console.log(data.tag[index].name);
  return (
    <ListItem button style={style} key={index}>
      <ListItemText primary={"# " + data.tag[index].name} />
    </ListItem>
  );
}

export default function VirtualizedList(props) {
  const classes = useStyles();
  const items = props.items;
  const name = props.name;
  const render = (name === "rank") ? renderRowRank : renderRowTag;
  const count =  (name === "rank") ? items.rank.length : items.tag.length;
  return (
    <div className={classes.root}>
      <h4>{props.children}</h4>
      <FixedSizeList height={400} width={360} itemSize={46} itemCount={count} itemData={items} >
        {render}
      </FixedSizeList>
    </div>
  );
}