Defining the component hierarchy

Let's add our components. We will make use of multiple react-bootstrap components:

  • FormControl: This component renders form elements and applies Bootstrap's styling to them.
  • FormGroup: This component wraps a form control (or set of controls), applying spacing. It is also possible to define a label and display the validation state of FormGroup.
  • InputGroup: This component allows to put other elements before or after an input, using InputGroup.Prepend or InputGroup.Append, respectively.

Replace the Container component with the following code:

<Container className='lf-search'> <FormGroup id='searchForm'> <InputGroup size='lg'> <FormControl id='searchText' type='text' placeholder='Artist or song to search for' ...

Get Learn TypeScript 3 by Building Web Applications now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.