React js | SoloLearn: Learn to code for FREE!

0

React js

Dear collegues, there are cards with information about drinks (name, image). In the console you can see the full information of the card from json file (name, image, preparation). It shows on the console. But I can't fix it to show on the screen, the clicked cocktail should open on the page and show the information from json file.

6/24/2020 6:40:00 PM

Anara Zhunusova

21 Answers

New Answer

+1

Anara Zhunusova Or just list your code of the drink component here, so I can study it.

+3

Anara Zhunusova When I click a drink on explore page, it actually redirect to preparation page and show the drink information.

+3

People, I fixed it. Thank you very much for support. All respect to you!

+3

there is just a button “search”.... I don’t know how to fix it corect way. In the beginning all drinks were not supposed to be shown on the screen.. And that button supposed to submit and show drinks that are searched

+2

Anara Zhunusova Here a quick example of cocktail json data populated to a react component. https://code.sololearn.com/WcAnNwHyXp5q/?ref=app

+2

Anara Zhunusova Great, I will check it later, once I reached home.

+2

god bless you! 🙏

+2

aaa ok! I’ll check 🤗

+2

I guess I gotta fix the pagenation buttons to list cocktails

+1

let person=JSON.parse({"name":"something", "age":69}) console.log(person) Basically, JSON.parse() converts any json to Javascript objects. So, that we can use that object letter in code

+1

thank you, people! I’ll try to fix it

+1

Anara Zhunusova Can you show the code on Code Playground or GitHub?

+1

Thank you so much! I just need help to fix that part to show the message "the drink is not found / no result" if I don't find it. And to show the clicked drink on the separate page. The Searcher component is doing search + Card component is for showing all drinks, Preparation is for the drink that I click on.

+1

Anara Zhunusova I think all drinks ahown from beginning is triggered by The conditional !search, try to remove "|| !serach" from function searchingFor and see. function searchingFor(search) { return function(cocktails) { return cocktails.name.toLowerCase().includes(search.toLowerCase()) || !search; } }

+1

Hi, Kaitlyn 🖐

0

Anara Zhunusova Just checked out your code. I think you have managed to get the clicked drink on seperated page with preparation and other information.

0

Anara Zhunusova To show a "not found" message, when there is no other searched drink, you could add an extra component before the list of Card components in Searcher.js With the code { data.cocktails.filter(searchingFor(search)).length===0 && <p>The drink is not found / no result</p> } It should show the message whenever there is no search result. On line 69, https://gist.github.com/cv2k10/d1cf28f049ccc4ec90567b9c39b16266

0

thank you

0

Anara Zhunusova it's an awesome code, keep up the good work!

0

Anara Zhunusova so all drinks are still shown on the screen now? I found that your submit button is not functioning. For your case, normally you don't need submit button since your search text is immediately response with filtered drinks.