(react-window) How to pass props to {Row} in {Row}

Question

I am using library called react-window

When I pass props to its row like this:

{Row({...props, {otherProps}})}

it gave me an error something like:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: ...

How is the correct way to do that?

show more code... what is Row component... or is it a function? — Dennis Vash, Jul 13 '19 at 10:29

score 36 · Accepted Answer · answered Jul 13 '19 at 12:16

You add props to data property of the parent element. Pay attention to itemData={{ testData: "123", otherData: true }}.

const Example = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
        itemData={{ testData: "123", otherData: true }}
      >
        {Row}
      </List>
    )}
  </AutoSizer>
);

And then in Row component you can get data from props like this const { data, index, style } = props;

const Row = props => {
  const { data, index, style } = props;
  return (
    <div>
      {index} Row {data.testData}
    </div>
  );
};

Demo to see it in action: https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-dtnre

score 3 · Answer 2 · answered May 06 '21 at 19:05

3

This works too:

  <List
    ...
  >
    {(props) => Row({...props, yourCustomProp})}
  </List>

Use in Row like this:

const Row = props => {
  console.log(props.yourCustomProp);
  return (
    <div>
      ...
    </div>
  );
};

answered May 06 '21 at 19:05

hellogoodnight

1,989
7
29
57

score 1 · Answer 3 · answered Aug 28 '19 at 21:43

You can have Row return a function. You can access both parameters from the function definition. So then you can pass the data directly into the Row() call.

const Example = () => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row({ testData: "123", otherData: true })}
      </List>
    )}
  </AutoSizer>
);

And the the Row function:

const Row = data => props => {
  const { index, style } = props;
  return (
    <div>
      {index} Row {data.testData}
    </div>
  );
};

Here's a Demo: https://codesandbox.io/s/bvaughnreact-window-fixed-size-list-vertical-tqdpf

score 1 · Answer 4 · answered Oct 17 '19 at 13:44

I found this extremely confusing but here's my code (hoping it can help):

class Row extends PureComponent {
  render() {
    const { data, index, style } = this.props
    const {
      classes,
      itemsPerRow,
      shows,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack,
    } = data

    const items = []
    const fromIndex = index * itemsPerRow
    const toIndex = Math.min(fromIndex + itemsPerRow, shows.length)

    //console.log(this.props)

    for (let i = fromIndex; i < toIndex; i++) {
      items.push(
        <ShowCard
          key={i}
          item={shows[i]}
          setCardMarkerHover={setCardMarkerHover}
          resetCardMarkerHover={resetCardMarkerHover}
          playTrack={playTrack}
        />
      )
    }

    //  console.log(items)

    return (
      <div className={classes.Row} style={style}>
        {items}
      </div>
    )
  }
}

class FastList extends React.Component {
  getItemData = memoize(
    (
      classes,
      itemsPerRow,
      shows,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack
    ) => ({
      classes,
      itemsPerRow,
      shows,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack,
    })
  )

  render() {
    const {
      shows,
      classes,
      setCardMarkerHover,
      resetCardMarkerHover,
      playTrack,
    } = this.props

    //console.log(this.props)

    // console.log(shows);

    return (
      <div style={{ height: "90vh", minWidth: "20vw" }}>
        <AutoSizer>
          {({ height, width }) => {
            const itemsPerRow = 1

            const rowCount = Math.ceil(shows.length / itemsPerRow)
            const itemData = this.getItemData(
              classes,
              itemsPerRow,
              shows,
              setCardMarkerHover,
              resetCardMarkerHover,
              playTrack
            )

            return (
              <div>
                <List
                  height={height}
                  itemCount={rowCount}
                  itemData={itemData}
                  itemSize={CARD_SIZE}
                  width={width}
                >
                  {Row}
                </List>
              </div>
            )
          }}
        </AutoSizer>
      </div>
    )
  }
}

FastList.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(FastList)

score 1 · Answer 5 · answered Feb 01 '22 at 14:23

This is Function as Child Component Pattern. See more: here

Other alternative:

<List
    itemData={{
        ...yourProps
    }}>
    ...
  >
    {(props) => <Row {...props}/>}
</List>

Row

const Row = ({ data, index, style }) => {
  const { ...yourProps } = data
  return (
    <div style={style}> // Don't forget to pass the style
      ...
    </div>
  );
};

score 1 · Answer 6 · answered Mar 06 '22 at 03:16

import { CSSProperties, memo, useCallback, useMemo } from 'react'
import AutoSizer from 'react-virtualized-auto-sizer'
import { areEqual, FixedSizeList } from 'react-window'

interface Data {
    someProp: string
    users: Array<{ id: number }>
    someMethod(id: number): string
}

interface RowProps {
    data?: Data
    index?: number
    style?: CSSProperties
}

const Row = memo((props: RowProps) => {
    const { data, index, style } = props
    const { someProp, users, someMethod } = data || {}
    const { id } = users[index] || {}
    return (
        <div style={style}>
            {someProp}: {someMethod(id)}
        </div>
    )
}, areEqual)

interface ComponentProps {
    someProp: string
    users: Array<{ id: number }>
}

const SomeComponent = (props: ComponentProps) => {
    const { someProp, users } = props

    const someMethod = useCallback(
        (id: number) => {
            return `${someProp.slice(-4)}-${id}`
        },
        [someProp],
    )

    const itemData = useMemo(
        () => ({
            someProp,
            users,
            someMethod,
        }),
        [someProp, users, someMethod],
    )

    return (
        <AutoSizer disableWidth>
            {({ height }) => (
                <FixedSizeList
                    itemCount={users.length}
                    itemData={itemData}
                    itemSize={48}
                    height={height}
                    width={'100%'}
                >
                    {Row}
                </FixedSizeList>
            )}
        </AutoSizer>
    )
}

(react-window) How to pass props to {Row} in {Row}

6 Answers6