Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,778 members, 7,955,975 topics. Date: Sunday, 22 September 2024 at 08:17 PM |
Nairaland Forum / Science/Technology / Programming / Programmers Of Nairaland. I Need Help!!! (1467 Views)
Are There Devs In The Medical Field Here On Nairaland? I Need Your Advice... / Please Friends How Do I Get My Site Unblock On Nairaland? I Need You Guys Please / My Version Of Nairaland App For Android (2) (3) (4)
Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 11:13pm On Jul 16, 2020 |
I am building a react pizza application. I have created a modal in a separate components folder. My modal would be posted below. I added some dummy image, title, and ingredient content to enable me to style the modal. I have my pizza container which would be posted below. What I am trying to do is show my modal upon the click of the select button but with the image, title and ingredients description of the selected component. My pizza component is functional component and I know I would need to change it to a class-based component to be able to handle events. How do I go about updating the content dynamically in the modal and not just showing the dummy content I set in order to style the modal. This is the JSX code for my Pizza component. Its a functional component.
|
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 11:14pm On Jul 16, 2020 |
For some weird reasons I cant post the code. Just need some pointers on what to do. I had to to make the modal component a class based one because I need to handle events for the slider buttons. |
Re: Programmers Of Nairaland. I Need Help!!! by devdev: 11:45pm On Jul 16, 2020 |
tensazangetsu20:class component use onClick and setState. So you pass the data in the state. on the modal, get the data of the state. Remember key={somethingUnique}. Functional component, use useState... you should know how to handle that |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 11:51pm On Jul 16, 2020 |
devdev: What I am trying to achieve is a unique content on the modal. I set it statically so I could style it but onclick of the select button that buttons title, it's image and it's details are what I want to show in the modal. I have already set the onclick function to show the modal but the modal content is what I want to change dynamically. The data is the picture and the text. |
Re: Programmers Of Nairaland. I Need Help!!! by devdev: 11:55pm On Jul 16, 2020 |
tensazangetsu20:Lol... you open the modal with boolean using setState.... that same setState pass the data of the current item and call it on the modal. Do you need example? |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 11:57pm On Jul 16, 2020 |
devdev:Yes something like this. I was thinking of passing props but I absolutely have no idea on how to go about that. |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 11:59pm On Jul 16, 2020 |
devdev:devdev is right, in your setState where you are calling your modal, pass the ID or the pizza data you want to show.. |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 12:01am On Jul 17, 2020 |
Taofeekdboy:Abeg can you just give me an example. |
Re: Programmers Of Nairaland. I Need Help!!! by devdev: 12:03am On Jul 17, 2020 |
tensazangetsu20:You can pass props if you have the modal on a different file. Nairaland is refusing me from pasting my code. |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 12:07am On Jul 17, 2020 |
devdev:Abeg screenshot. I don dey here since morning o. I wan craze. It's my first react project and I wanna add it to my portfolio. |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 12:12am On Jul 17, 2020 |
tensazangetsu20:Yes I am writing one now... Just wait. |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 12:14am On Jul 17, 2020 |
Taofeekdboy:Thank you so much. |
Re: Programmers Of Nairaland. I Need Help!!! by devdev: 12:24am On Jul 17, 2020 |
tensazangetsu20:https://codepen.io/hiset/pen/wvMYxgP check the js part for the code. Notice how the object was passed in the function. Hope this helps |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 12:55am On Jul 17, 2020 |
I am trying to post the code but it is not allowing it here |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 1:05am On Jul 17, 2020 |
I have posted it on codepen, you can check it there as well . https://codepen.io/taofeek-adeshina-adebayo/pen/yLeRqjw |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 7:59am On Jul 17, 2020 |
devdev:Thanks bro. Just seeing this as my internet went off. |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 8:01am On Jul 17, 2020 |
Taofeekdboy:Thank you. I would work on this with your code today. I am so grateful. Thank you for taking the time to do this. |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 12:57pm On Jul 17, 2020 |
Taofeekdboy:https://codepen.io/chinomso1995/pen/mdVzZJE Bros I tried to use your method but its not displaying the pictures or text. Can you go through the code . Maybe there is something I am not doing right. I already set all the properties on the pizzas array now I want to show a unque property according to each button click on that modal. |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 1:28pm On Jul 17, 2020 |
tensazangetsu20:I have gone through your code but I noticed where you are passing Modal on Pizza component and you are using PizzaModal which is not getting the props, if you are using PizzaModal for the pizza details, then the component will be the one to get the props, then you can use it in your component.... And one more thing, if you are using css framework, at times the implementation might differ because they have incorporated their own javascript or React element into it because I am seeing Modal that you are passing into Pizza components and it is not a component on its own... |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 1:33pm On Jul 17, 2020 |
Taofeekdboy:It is pure CSS no frameworks. What adjustments do you think I should make. The pizzamodal is in the same folder as the pizzas component. The modal is its own class based component. I made it class based to handle some events related to those slider buttons. Scroll down to check. |
Re: Programmers Of Nairaland. I Need Help!!! by Olalekank(m): 2:13pm On Jul 17, 2020 |
Great progress you have there. Just some things that might make your life a little easier, especially if you want to have a modal that is dynamic Have a modal component. The modal should render only children such that you can pass call the modal as <Modal> ....some content here </Modal> The state of the modal should be controlled from the component where the event to show the modal is fired Sharing a codepen link soon |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 2:28pm On Jul 17, 2020 |
tensazangetsu20:You need to map or loop through the pizzas state and map it to your Modal component, you don't need to write your Modal return output in Pizza component, you just need the props object from Pizza component, I will copy the code from your codepen and re write it.... |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 2:38pm On Jul 17, 2020 |
Olalekank:Thank you sir. I wanted doing this but there are also some events I wanted handling in the modal like the picture that scales depending on the size the user selects |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 2:39pm On Jul 17, 2020 |
Taofeekdboy:Thank you so much for taking your time to go through this with me. God bless you. |
Re: Programmers Of Nairaland. I Need Help!!! by Olalekank(m): 3:08pm On Jul 17, 2020 |
tensazangetsu20:Check this out https://codesandbox.io/s/suspicious-davinci-v5t0m?file=/src/Pizzas.js You can get the idea here Everything you need to do can be done inside of the pizza class without having to modify the modal component itself |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 3:45pm On Jul 17, 2020 |
tensazangetsu20: Bro, I have worked on it, not really different from the one I did and also you are almost there, I have put some comments in it to get you through, just make sure you map through or loop, which one you are comfortable. https://codepen.io/taofeek-adeshina-adebayo/pen/yLeRqjw 1 Like |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 8:51pm On Jul 17, 2020 |
Taofeekdboy: Thank you bros. E don work o. Thank you so much for taking your time to help me. 1 Like |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 8:51pm On Jul 17, 2020 |
Olalekank: Thank you bros. God bless you. |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 8:54pm On Jul 17, 2020 |
Thanks to everyone who helped me out. Here is the final code I used https://codepen.io/chinomso1995/pen/mdVzZJE incase anyone else has a similar problem. |
Re: Programmers Of Nairaland. I Need Help!!! by uchechi7(m): 9:40pm On Jul 17, 2020 |
Good day Nairalanders, I'm a student who just started learning web design (HTML and CSS). I'm having financial challenges and my system has crashed and I have spent every dime on me to fix it but it's still developing more fault. Please I'm in need of assistance to purchase a new system (fairly used). Nothing will be to small or big for me, I know things are hard right now; Please I'm really in need of a system. I reside in Port Harcourt and here is my details. Bright Sampson UBA 2085555677 |
Re: Programmers Of Nairaland. I Need Help!!! by Taofeekdboy(m): 9:45pm On Jul 17, 2020 |
tensazangetsu20:Nice bro... More cheers!!!! |
Re: Programmers Of Nairaland. I Need Help!!! by tensazangetsu20(m): 9:46pm On Jul 17, 2020 |
uchechi7:Check devcareers on twitter. They give laptops to intending developers. |
(1) (Reply)
Security Alert: Disable Or Uninstall Java Software From Your Computer(s) / What You Do To See Any Password Behind The Stars Like This[*****}.. / A Nairalander Designs A Software To Boast Entrepreneurship In Universities
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 65 |