React js | SoloLearn: Learn to code for FREE!

+1

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

23 Answers

New Answer

+1

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

+4

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

+4

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

+3

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

+3

god bless you! 🙏

+3

aaa ok! I’ll check 🤗

+3

I guess I gotta fix the pagenation buttons to list cocktails

+2

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

+2

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

+2

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

+2

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.

+2

Hi, Kaitlyn 🖐

+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

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

+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

Use ReactJS development in 2021, read here - https://techeest.com/reactjs-development-in-2021/

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!