Skip to content

Array of elements

szymonkorytnicki edited this page Jul 18, 2018 · 2 revisions

Let's assume you want to render a countdown from 10 to 0. Writing each number is terribly time consuming (assume this too).

Thanks to chatblocks, you can render arrays in a manner similar to React.

const nums = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
class Countdown extends Component {
    async render() {
        return <Block>
            <Text>Final countdown:</Text>
            <CountdownNumbers />
        </Block>
    }
}

class CountdownNumbers extends Component {
    async render() {
        return nums.map(async (el) => <Text>{el}...</Text>);
    }
}

Important every array has to wrapped in a separate component. Use map.

Clone this wiki locally