JSFiddle - React, Tailwind, and code Playground

HTML

Topic: <input type="text" id="topics" /><input type="hidden" id="topicID" />

<br/><br/><br/><br/>

<p>You selected <span id="results"></span></p>

JavaScript

var topics= [
    {
        value: "cooking",
        label: "Cooking",
        id: "1"
    },
    {
        value: "C++",
        label: "C++",
        id: "2"
    },
    {
        value: "craftsmanship",
        label: "Software Craftsmanship",
        id: "3"
    }
];

$(document).ready(function() {
    $( "#topics" ).autocomplete({
        minLength: 0,
        source: topics,
        focus: function( event, ui ) {
            $( "#topics" ).val( ui.item.label );
            return false;
        },
        select: function( event, ui ) {
        debugger;
            $( "#topics" ).val( ui.item.label );
            $("#topicID").val(ui.item.id);
            $( "#results").text($("#topicID").val());    
            return false;
    }
})

});