React js

Question

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.

Answer 1

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

Answer 2

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

Answer 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

Answer 4

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

Answer 5

god bless you! 🙏

Answer 6

aaa ok! I’ll check 🤗

Answer 7

I guess I gotta fix the pagenation buttons to list cocktails

Answer 8

Anara Zhunusova Here a quick example of cocktail json data populated to a react component.

https://code.sololearn.com/WcAnNwHyXp5q/?ref=app

Answer 9

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

Answer 10

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

Answer 11

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.

Answer 12

Hi, Kaitlyn 🖐

Answer 13

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

Answer 14

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

Answer 15

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;
}
}

Answer 16

I need help in React

Answer 17

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

Answer 18

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.

Answer 19

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

Answer 20

thank you