how to create a react component that uses a linked list in javascript

index.tsx
class Node {
  constructor(data) {
    this.data = data;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
    this.size = 0;
  }

  // Add element at the end
  add(data) {
    let node = new Node(data);

    if (!this.head) {
      this.head = node;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = node;
    }

    this.size++;
  }

  // Insert an element at the 0-based index
  insertAt(data, index) {
    if (index < 0 || index > this.size) {
      return null;
    }

    let node = new Node(data);

    if (index === 0) {
      node.next = this.head;
      this.head = node;
    } else {
      let current = this.head;
      let prev = null;
      let i = 0;

      while (i < index) {
        prev = current;
        current = current.next;
        i++;
      }

      node.next = current;
      prev.next = node;
    }

    this.size++;
  }

  // Remove the element at the 0-based index
  removeFrom(index) {
    if (index < 0 || index >= this.size) {
      return null;
    }

    let current = this.head;
    let prev = null;
    let i = 0;

    if (index === 0) {
      this.head = current.next;
    } else {
      while (i < index) {
        prev = current;
        current = current.next;
        i++;
      }

      prev.next = current.next;
    }

    this.size--;

    return current.data;
  }
}
1435 chars
87 lines

index.tsx
import React, { Component } from 'react';

class LinkedListComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: new LinkedList(),
      inputValue: ''
    };
  }

  handleInputChange = (event) => {
    this.setState({ inputValue: event.target.value });
  }

  handleAddClick = () => {
    this.state.list.add(this.state.inputValue);
    this.setState({ inputValue: '' });
  }

  handleInsertClick = () => {
    let index = parseInt(this.refs.indexInput.value, 10);
    this.state.list.insertAt(this.state.inputValue, index);
    this.setState({ inputValue: '' });
  }

  handleRemoveClick = () => {
    let index = parseInt(this.refs.indexInput.value, 10);
    this.state.list.removeFrom(index);
    this.setState({ inputValue: '' });
  }

  render() {
    let nodes = [];
    let current = this.state.list.head;

    while (current) {
      nodes.push(<li key={current.data}>{current.data}</li>);
      current = current.next;
    }

    return (
      <div>
        <input type="text" value={this.state.inputValue} onChange={this.handleInputChange} />
        <button onClick={this.handleAddClick}>Add</button>
        <input type="text" placeholder="Index" ref="indexInput" />
        <button onClick={this.handleInsertClick}>Insert</button>
        <button onClick={this.handleRemoveClick}>Remove</button>
        <ul>{nodes}</ul>
      </div>
    );
  }
}

export default LinkedListComponent;
1448 chars
57 lines