You will be shown how to hightlight a selected item in a list. Let's get straight to it!

step 1. Create Component

Create a class component

export default class ItemSelect extends Component {

    render() {
        return (
              <div></div>
        )
    }
}

Step 2. Create constructor within component

constructor(props) {
  super(props);
}

Step. 3 Declare states within the constructor you created.

constructor(props) {
  super(props);

  this.state = {
     listId:"",
  };
}

Step 4. Declare an array within component

filterListLocal = [
 'London',
 'New York',
 'Paris',
 'Delhi',
 'Italy'
];

Step 5. Create the list using array map method within render method

In this step a bit of styling is used from Bootstrap and MDBreact to create the list.

The classnames method accepts an array of classes. It is used to create conditions within JSX for classes.

The array map method is used to loop through the items and display them in the list. Each item has a unique index which is used to create unique ids.

The index is passed to the handleFilterLocal  method as params.

Whenever the checkbox in the list is checked the onChange handler calls  handleFilterLocal

In the next step we will go through what the handleFilterLocal method does.

render() {
        return (
            <div>
                <MDBCard>
                    <MDBCardHeader>
                        <h4>List item</h4>
                    </MDBCardHeader>
                    <MDBCardBody>
                        <ul className="flt-lt-clt list-group">
                            {
                                this.filterListLocal.map((value,i)=>{
                                    return (
                                        <li key={i} id={i} className={classnames( ['text-start', 'list-group-item', 'list-group-item-action', ((this.filterListLocal.length - 1) !== i)?'mb-2':null, (this.state.listIdLocal === i)?'main-theme-color-bg hvr-clr':null])} onClick={this.handleFilterLocal.bind(this, i)}>
                                            <h6>{value}</h6>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </MDBCardBody>
                </MDBCard>
            </div>
        )
    }

6. Create handleFilterLocal method

The logic within the handleFilterLocal method determines if the list should be higlighted or not.

If the index passed to the method is the same as the value of the state listId, show classes that higlight the item in the list.

This will happen on click of the list item.

handleFilterLocal(id){
    if(this.state.listId !== id) {
         this.setState({listId: id});
     }
}

The final class should look like below:

import React, { Component } from 'react';
import {MDBCard, MDBCardBody, MDBCardHeader} from "mdbreact";
import classnames from "classnames";

export default class ItemSelect extends Component {

    constructor(props) {
        super(props);

        this.state = {
            listId:"",
        };
    }

    handleFilterLocal(id){
        if(this.state.listId !== id) {
            this.setState({listId: id});
        }
    }

    filterListLocal = [
        'London',
        'New York',
        'Paris',
        'Delhi',
        'Italy'
    ];

    render() {
        return (
            <div>
                <MDBCard>
                    <MDBCardHeader>
                        <h4>List item</h4>
                    </MDBCardHeader>
                    <MDBCardBody>
                        <ul className="flt-lt-clt list-group">
                            {
                                this.filterListLocal.map((value,i)=>{
                                    return (
                                        <li key={i} id={i} className={classnames( ['text-start', 'list-group-item', 'list-group-item-action', ((this.filterListLocal.length - 1) !== i)?'mb-2':null, (this.state.listId === i)?'main-theme-color-bg hvr-clr':null])} onClick={this.handleFilterLocal.bind(this, i)}>
                                            <h6>{value}</h6>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </MDBCardBody>
                </MDBCard>
            </div>
        )
    }
}

Here is the styling, I put in App.css 

.flt-lt-clt{
  padding-left: 0 !important;
}

.flt-lt-clt li{
  border: none !important;
}

.flt-lt-clt li:hover{
  cursor: pointer;
  background-color: #5f0a5f;
  color: #ffffff;
}

.hvr-clr{
  background-color: #5f0a5f;
  color: #ffffff;
}

That is it!