Render Media List Component With Reactstrap
Tags: react, javascript
Published: 2020-07-01 17:22:50

#Reactstrap
**Reactstrap** makes it easy to use **Bootstrap 4** components in a react application. *Media* is one of the components, and we'll use it to display a list of items in a simple react application. The list items will consist of an *image, heading, & a paragraph.*
#Installation
To configure our project to use reactstrap, type the following at the terminal to install reactstrap, and Bootstrap 4 via either NPM or Yarn.
```npm install --save bootstrap react-popper reactstrap```
```yarn add bootstrap react-popper reactstrap```
#Adding a Menu Component
Now inside our *App.js* let's import the menu component with the following code
```import { Media } from "reactstrap";```
The Media has properties including *list, tag, object, heading, & body.* List encloses all the list items, tag encloses each list item, object encloses the image while the heading & body encloses the list heading and body respectively. With that explanation out the way lol 😉, let's add the code snippet below in the App.js to see this in action.
```


export default function App() {
const Example = () => {
return (
<div>
   <Media list>
      <Media tag="li">
         <Media left top href="#">
            <Media
               object
               src="http://place-puppy.com/100x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Top aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
      <Media tag="li">
         <Media left middle href="#">
            <Media
               object
               src="http://place-puppy.com/200x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Middle aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
      <Media tag="li">
         <Media left bottom href="#">
            <Media
               object
               src="http://place-puppy.com/300x200"
               alt="place-puppy image"
               />
         </Media>
         <Media body>
            <Media heading>Bottom aligned media</Media>
            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
            scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
            in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
            nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         </Media>
      </Media>
   </Media>
</div>
);
};
return (
<div className="App">
   <Example />
</div>
);
}


```
In essence we're declaring a function component called *Example* which returns three list items, each item has an image with a heading and body text.
Please checkout reacstrap documentation below for more examples on how to implement the Media component in a react application.

Reference [https://reactstrap.github.io/components/media/]