Using render prop to render lists in React

Profile pictureToni Petrina
Published on 2017-12-071 min read

    Render props are awesome! Let's write a flexible list renderer with them in mind. Given an example list list = [1,2,3,4] we will render it with the following snippet:

    <List items={this.list}>
    { num => <span>{num}.</span>}

    And the trivial implementation of the List component is:

    const List = ({ items, children }) =>, index) => children(item, index))

    Which can be shortened to:

    const List = ({ items, children }) =>

    Note: This only works in React 16 since we are returning an array from the List component.


    Change code theme: