How to use react-virtualized in react js

React-virtualized is the Open-source library ,designed for developers and it is optimized and stable ,the core concept behind this package is that There are one thousand data in the app, but it only shows around ten at any moment (the ones that fit on the screen), until you scroll to show more.So it makes sense to load only the elements that are visible and unload them when they are not by replacing them with new ones.
1.They calculate which items are visible inside the area where the list is displayed (the viewport).
2. They use a container with relative positioning to absolute position the children elements inside of it by controlling its top, left, width and height style properties.

virtualization.js file is displayed below:

1import React from "react";
2import { List } from "react-virtualized";
3import Card from "./Card";
4import "./styles.css";
5import Chance from "chance";
6
7export default class Virt extends React.Component {
8  constructor(props) {
9    super(props);
10    this.state = { person: "" };
11  }
12  componentDidMount() {
13    const dummyData = [];
14    for (let i = 0; i <= 100; i++) {
15      dummyData.push({
16        name: chance.name(),
17        handle: chance.twitter()
18      });
19    }
20    this.setState({
21      person: dummyData
22    });
23   
24    // const data = this.makeUser("Moiz", 12);
25  }
26 
27  render() {
28    console.log("kokok",this.state.person)
29    return (
30      <>
31        <List
32          width={600}
33          height={600}
34          rowHeight={60000}
35          rowCount={100}
36          rowRenderer={({ key, index, style }) => {
37            const person = this.state.person[index];
38            return (
39              <div key={key} style={style}>
40                <Card
41                person={this.state.person}
42                  
43                />
44              </div>
45            );
46          }}
47        />
48      </>
49    );
50  }
51}

Data.js file is displayed below

1import React from "react";
2import "./styles.css";
3export default class Card extends React.Component {
4  constructor(props) {
5    super(props);
6    this.state = {
7      result: props.person
8    };
9  }
10  render() {
11    console.log("khuhu", this.props.person);
12    let a =
13      this.props.person &&
14      this.props.person.map((col, k) => {
15        return (
16          <div class="card">
17            {/* <img src="img_avatar.png" alt="Avatar" style="width:100%"> */}
18            <div class="container">
19              <h4>
20                <b>
21                  name: {col.name}
22                  <br />
23                  handle: {col.handle}
24                </b>
25              </h4>
26            </div>
27          </div>
28        );
29      });
30    
31    return (
32      <>
33        <div>{a}</div>
34      </>
35    );
36  }
37}

App.js file is displayed below

1
2import "./styles.css";
3import React from "react";
4import Virt from "./Virtualization";
5
6
7export default class App extends React.Component {
8  render() {
9    return (
10      <>
11        <h1></h1>
12     
13        <Virt />
14      </>
15    );
16  }
17}

Here is the link of live example which we done so far:
Click here