O'Reilly logo

React and React Native - Second Edition by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Lists

A common UI element in both mobile and desktop contexts is rendering lists of items. This is easy enough to do without the support of a CSS library, but libraries help keep the look and feel consistent. Let's implement a list that's controlled by a set of filters. First, you have the component that renders the react-bootstrap components:

import React from 'react';import PropTypes from 'prop-types';import {  Button,  ButtonGroup,  ListGroupItem,  ListGroup,  Glyphicon} from 'react-bootstrap';import './FilteredList.css';// Utility function to get the bootstrap style// for an item, based on the "done" value.const itemStyle = done => (done ? { bsStyle: 'success' } : {});// Utility component for rendering a bootstrap// icon based on the value ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required