converting js into react autocomplete search input form

Question

quite new to this react thing but i previously wrote a simple js script for my own search input for autocomplete

$(function () {
    $("#search_item").autocomplete({
        minLength: 1,
        source: function (req, resp) {
            var collected;
            $.getJSON("https://api.test.com/items/autocomplete?q=" + req.term, function (json) {
                console.log(json);
                resp(json.data);
            })
        }
    });
});

html

 <form action="/api/search">
                <div class="input-group">
                    <input id="search_item" type="text" class="form-control" placeholder="Search for..." name="item_search_keyword">
                    <span class="input-group-btn">
                        <button class="btn btn-secondary" type="submit" id="btnSubmit">Search!</button>
                    </span>
                </div>
            </form>

trying to convert this into React with a simple input search bar but not so familiar with React. Possible if anyone can give me some help?

Answer 1

I think the best answer to this is that you need to convert your mind to React first, before converting the code.

It is not just a small change to migrate code like that to React. React follows a fundamentally different approach, which is not compatible with your example. E.g. you should not touch the DOM directly.

Imagine you are not writing javascript / DOM anymore, but you are writing a different language (i.e. React) now.

As a vague direction for a solution: I guess you would create a React component like <MyInputWithAutoComplete>, which returns e.g. your input-group, and handles your autocomplete logic with a useEffect.