DEV Community

How To Write a Search Component with Suggestions in React

Stefan Age on November 30, 2017

Github Repo This example uses syntax that requires transpiling. See repo for full babel configuration. Providing search suggestions is a great way...

Read full post

abhi4pr • May 4 '18

Sir i got an error (Unhandled Rejection (TypeError): Cannot read property 'data' of undefined).
in this line (results:data.data).

I created my own API.

app.get('/Search',function(req,res){
con.query("select * from webtable where username like '%username%'",
function(err,searchrs){
console.log("Search results:",searchrs);
res.json(searchrs);
})
});

What corrections this API need ?
How to resolve that above error ?

Please answer me soon
Thanks in advance.

antonio.nicasio.herrera@gmail.com • Jan 22 '19

out need to check your output response because data is not declared the error says all
Cannot read property 'data' of undefined

Matt Layden • Aug 22 '18

Hey,
How can I get this to work with a Fetch API? I am using react-router and am able to type into the search bar and re-render with results that were fetched by "tags" which is a key in the json. For example, if I type the word "hip" in my search bar the page will re-render with videos that have the tag "hip" in their json.

However, I can't seem to connect this code you have here with what I am using and I think it is because I do not need to fetch from my navbar.

Thanks
Matt

Stefan Age • Sep 2 '18 • Edited

Hey Matt - Do you have an example or sandbox I could look at? It should work pretty much identically with Fetch.

Fabrício Santos • Aug 13 '18

Hey Stefan, How and where can I use my API_KEY ?

Stefan Age • Aug 13 '18

Hi Fabricio,

You can define your API KEY in your shell instance by running the command:
$ export MGRPH_KEY=yourAPIkey. Just make sure to start the app in the same window.

You can also utilize a .env file.

Lastly, you can add it as part of your start script for example

package.json

"scripts":  {
    "start": "MGRPH_KEY=yourAPI-KEY react-scripts start"
}

Plaidsanne • Sep 19 '18

Hello,

musicgraph seems to be down and not responsive when testing API's. I was wondering is this the case for you as well.

naveensomanna • Apr 20 '18

sir how to hide that api list

Stefan Age • Apr 20 '18 • Edited

There are a few ways you could hide the Suggestions component. I think a simple solution would be to create a state attribute called showSuggestions. Then you could show/hide it using React's short circuit syntax. In the render method add { this.state.showSuggestions && <Suggestions results={this.state.results} /> }. Then just use setState whenever you want to change the value of showSuggestions, for example when the user leaves the input field.