JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "container" id="formcontainer">
            <form>
                <div class="form-group col-lg-4 col-md-offset-3">
                    <h1>Welcome</h1>
                    <input type="text" class="form-control search" id="search" placeholder="What is in your mind?">

                </div>
                <div class="form-group col-lg-4 col-md-offset-3">
                    <button class="btn btn-primary" onClick="getProducts('Elecrtonics')">Elecrtonics</button>
                    <button class="btn btn-primary" onClick="getProducts('fasion')">Fasion</button>
                    <button class="btn btn-primary" onClick="getProducts('sports')">Sports</button>
                </div>
                <p id = "myProducts"></p>
            </form>
        </div>

JavaScript

var products = {Elecrtonics:["Mobile","Tablet","Laptop"],fasion:["celio","UCB","PE"],sports:["Puma","Rebock","Nike"]};
            function getProducts (el){  
            debugger;
                document.getElementById("myProducts").innerHTML = products[el];
                    event.preventDefault()  
            }