react list start

App.tsx

import React, { Component } from 'react';
import './App.css';
import ItemList from "./ItemList";
import Item from "./Item";

interface Props {
}
interface State {
  items: Item[]
}

class App extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      items: [
        { id: "12345", name: "testname" },
        { id: "12345", name: "testname2" }
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <ItemList items={this.state.items} />
      </div>
    );
  }
}

export default App;

Item.ts

interface Item {
    id: string
    name: string
}

export default Item

ItemList.tsx

import React, { Component } from 'react';
import Item from './Item';

interface Props {
    items: Item[]
}

class ItemList extends Component<Props> {
    createItem(item: Item) {
        return <li key={item.id}>{item.name}</li>
    }

    render() {
        const listItems = this.props.items.map(this.createItem)
        return (
            <ul className="itemList">{listItems}</ul>
        )
    }
}

export default ItemList