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.

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.

tensazangetsu20:
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.

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

devdev:

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

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.

tensazangetsu20:


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.

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?

devdev:

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?

Yes something like this. I was thinking of passing props but I absolutely have no idea on how to go about that.

devdev:

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?

devdev is right, in your setState where you are calling your modal, pass the ID or the pizza data you want to show..

Taofeekdboy:

devdev is right, in your setState where you are calling your modal, pass the ID or the pizza data you want to show..

Abeg can you just give me an example.

tensazangetsu20:

Yes something like this. I was thinking of passing props but I absolutely have no idea on how to go about that.

You can pass props if you have the modal on a different file. Nairaland is refusing me from pasting my code.

devdev:

You can pass props if you have the modal on a different file. Nairaland is refusing me from pasting my code.

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.

tensazangetsu20:

Abeg can you just give me an example.

Yes I am writing one now... Just wait.

Taofeekdboy:

Yes I am writing one now... Just wait.

Thank you so much.

tensazangetsu20:

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.

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

I am trying to post the code but it is not allowing it here

I have posted it on codepen, you can check it there as well .
https://codepen.io/taofeek-adeshina-adebayo/pen/yLeRqjw

devdev:

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

Thanks bro. Just seeing this as my internet went off.

Taofeekdboy:
I have posted it on codepen, you can check it there as well .
https://codepen.io/taofeek-adeshina-adebayo/pen/yLeRqjw

Thank you. I would work on this with your code today. I am so grateful. Thank you for taking the time to do this.

Taofeekdboy:

Yes I am writing one now... Just wait.

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.

tensazangetsu20:

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.

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...

Taofeekdboy:

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...

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.

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

tensazangetsu20:

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.

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....

Olalekank:
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

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

Taofeekdboy:

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....

Thank you so much for taking your time to go through this with me. God bless you.

tensazangetsu20:

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

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

tensazangetsu20:

Thank you so much for taking your time to go through this with me. God bless you.

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

Taofeekdboy:


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

Thank you bros. E don work o. Thank you so much for taking your time to help me.

Olalekank:

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

Thank you bros. God bless you.

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.

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

tensazangetsu20:
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.

Nice bro... More cheers!!!!

uchechi7:
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

Check devcareers on twitter. They give laptops to intending developers.