Skip to content

Instantly share code, notes, and snippets.

@castaneai
Created Nov 20, 2018
Embed
What would you like to do?
react list start
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;
interface Item {
id: string
name: string
}
export default Item
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment