0

I need to know if it's possible to use react-window to display a list of items and in the same row show buttons with actions for each. If yes, please give me a hint on how to do it.

import React from "react";

import { FixedSizeList as List } from "react-window";

const ListBebes = ({
  bebes,
  handleItemClick,
  handleEditClick,
  handleDeleteClick,
}) => {
  const Row = ({ index, style }) => (
    <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      {bebes[index].nombres}
    </div>
  );
  return (
    <List
      className="List"
      height={5}
      itemCount={bebes.length}
      itemSize={35}
      width={300}
    >
      Row
    </List>
  );
};

export default ListBebes;

<Col xs="4">
  {this.state.is_fetching ? (
    "Loading..."
  ) : (
    <ListBebes
      bebes={this.state.bebes}
      handleItemClick={(id) => this.handleItemClick(id)}
      handleEditClick={(id) => this.handleEditClick(id)}
      handleDeleteClick={(id) => this.handleDeleteClick(id)}
    ></ListBebes>
  )}
</Col>;
carlos
  • 1
  • 3

1 Answers1

-1

Add what you what in your Row function

const Row = ({ index, style }) => (
   <div>
      <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
        {bebes[index].nombres}
      </div>
      <button>Your Button Here!</button>
   </div> 
);

Or just import a new component, maybe <YourItemComponent /> and return it in Row, you can do what you want in your new Componet like your other conponent

const Row = ({index, style}) => (<YourItemComponent index={index} style={style}/>);

and sorry about my poor english and wish you can understand

Christian Chen
  • 1
  • 1