JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>Bairro 1</p>
    <p>Bairro 2</p>
    <p>Bairro 3</p>
    <p>Bairro 4</p>
</div>

<div class="loja">
    <p>Bairro 1</p>
</div>
<div class="loja">
    <p>Bairro 2</p>
</div>
<div class="loja">
    <p>Bairro 3</p>
</div>
<div class="loja">
    <p>Bairro 4</p>
</div>

CSS

div > p {
    cursor: pointer;
    background-color: #ccf;
    width: 60px;
    padding: 5px;
}

.loja > p {
    cursor: default;
    background-color: transparent;
    width: 60px;
    padding: 5px;
}

JavaScript

function getElements(sel) {
    var els = document.querySelectorAll(sel);
    return [].slice.call(els);
}

function procurar(e) {
    var procurado = e.target.innerHTML;
    bairros.forEach(function(el) {
        el.parentNode.style.display = el.innerHTML == procurado ? 'block' : 'none';
    });
}

var escolhas = getElements('div:first-of-type > p');
var bairros = getElements('.loja > p');

escolhas.forEach(function(el) {
    el.addEventListener('click', procurar);
});