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' 
                         aria-label='Artist or song to search for'/> 
            <InputGroup.Append> 
                <Button variant='secondary' aria-label='Clear the 
                 search text'>X</Button> 
                <Button variant='primary' aria-
                 label='Search'>Search</Button> 
            </InputGroup.Append> 
        </InputGroup> 
    </FormGroup> 
</Container> 

Following are some remarks about this code:

• InputGroup has been made larger using size='lg'.
• FormControl is our text input and it has an aria-label property.

We have added a section about accessibility and ARIA in the next chapter. Don't miss that topic if you want to build applications for humans (that is, great applications), whether that is with Angular, Vue, React, or anything else!

Before you continue, don't forget to add the necessary imports:

import Button from 'react-bootstrap/Button'; 
import FormGroup from 'react-bootstrap/FormGroup'; 
import FormControl from 'react-bootstrap/FormControl'; 
import InputGroup from 'react-bootstrap/InputGroup'; 

Here's how the component should look at this point:

Bootstrap and react-bootstrap are sparing us a lot of effort, including in non-obvious ways.

We won't cover this in this book, but both React and react-bootstrap have great support for forms. In our case, there is only a single input so we don't really need more than the few components we have used. There are multiple third-party libraries such as Formik (https://github.com/jaredpalmer/formik), which you can use to go further. For React, check out the following page: https://reactjs.org/docs/forms.html.

Check out the following references:

• Forms support in react-bootstrap: https://react-bootstrap.netlify.com/components/forms
• The InputGroup component: https://react-bootstrap.netlify.com/components/input-group
• Formik: https://github.com/jaredpalmer/formik