how to add onclick on a button in reactjs??

[parikshitreddy45]

sir recently iam doing MERN Stack project on online movie ticket booking app i have almost done it untill book my ticket option but here i want to use onclick function to book seats by clicking on book my seat option but iam unable to link that user Interface to react using onclick can you plzz help me

[Jay-study-nildana]

@parikshitreddy45

Hello. First thing is, you need to share your code. There are two options to share your code.

1. use codesandbox, and put your react code and put the codesandbox link here.
2. create a GitHub repo, and put your react code and put the GitHub link here.

if you are looking for some example code on how to use buttons in react, then, check out these links.

1. https://codesandbox.io/u/Jay-study-nildana
2. https://github.com/Jay-study-nildana/FrontEndForStudents/tree/main/ReactJSForStudents

both are my own online code examples, with very good comments and explanations.

happy learning.

Jay.

[Jay-study-nildana]

@parikshitreddy45

I am sorry to say but the way you are doing this is completely wrong :(

1. why are you trying to link two different projects, one in React JS and another in HTML/CSS? I don't understand your style of software development coding.
2. You should only do HTML and CSS (called as vanilla JS) or you should only use React JS. Why you are using two projects is very confusing to me.

Please understand that if you are trying to build a booking ticket software, then you need to build two things.

1. First, you have to build Back End (also called as API)
2. Then, you have to build Front End (use Vanilla JS or React JS, but avoid using both) that will connect to the API is the previous step.

Right now, what you are doing is really really wrong. I think, you are still new to code learning, and are simply copy pasting code from somewhere on the internet and making it work, he he :P This approach is not good. I have made some videos for beginners like you who may be a little confused. (actually, i think you are super confused right now, lol)

https://www.youtube.com/playlist?list=PL7SHzFbuSdW0OLny_GyfMxLKidxeurrPz

Watch the videos, and see if they give you some clarity.

Happy learning.

Jay.

[parikshitreddy45]

sir i have creaated all the api link and i have used render to make my api links online aand then i used reactjs to link all the pages i have struck here in this booking user interfeace as u said a yes i cant link html and css but iam unable to create a booking of tickets seats user interface in react thats why i have asked help of you sir and i should wrtie a react code in such a way that if i click on bookmyticket i show open the tickets user interface of my seats of theatre can you help me how should build this user interaface of ticking selecting using reactjs only...

[Jay-study-nildana]

@parikshitreddy45

Then, you need to put the entire code, back end and front end, in a single github repo.

Right now, I have no clue what you are doing. my apologies brotha.

Jay.

[Jay-study-nildana]

@parikshitreddy45

I have looked at your repo (which is still very confusing for me to understand what is happening and where it is happening). I also read your sentence "i show open the tickets user interface of my seats of theatre can you help me how should build this user interaface of ticking selecting using reactjs only..."

This is a complex project you are trying to do. Now, I have never built a theatre seat app, so I don't know how to do it. So, I cannot help you build the entire interface, because, I don't know. I can only help with projects I have put in my repository. You can find them here.

https://github.com/Jay-study-nildana/FrontEndForStudents/tree/main/ReactJSForStudents

anything other than this, I cannot help you. sorry brotha.

One Last Thing

1. Your code organization is a mess. folders just copy pasting like crazy. It makes zero sense.
2. You see, when you are building an app, you should have only two folders.
   1. BackEnd : In this folder, you must put your back end code. You should also add a README.MD file, which explains other people, how to run your project and extra details.
   2. FrontEnd : In this folder, you must put your front end code. Again, you should add a README.md file, which explains other people, how to run your project. Also, front end project, react js, you should put on codesandbox, so people can immediately see and run the project, and help you with any error.s
3. BackEnd, you should deploy to an online server like AWS or Vercel. This is important because, without deploying your API server, your front end app will not run on code sandbox. So, this step is super important (all steps are super important, he he :P)
4. You should also include a Postman collection for the BackEnd so people can see how it works and what error you are getting.

You see, right now your code has 'zero documentation' and 'organization'. I cannot understand anything.

Also, I am sure you will be disappointed when you read this message because I am not helping you. But, my friend, in this community, I am trying to help students with simple questions and answers.

Nobody is paying me money to do this. I don't have a salary job. In the past, many students I used to help for many many days, build projects and all, help for free for one month, two months. Those students, after taking help they go away. They don't even wish me Happy New Year or Happy Teachers Day. Taking help for free and disappear. So, I have learnt my lesson. I will help with small small questions, but big questions, like your question, I don't want to spend time.

you are asking for help to build entire interface, which will take 1 week or 2 weeks. If I spend 2 weeks helping you, how will I pay my rent and food? So, I hope you understand. I can help students with simple questions, but anything more complex, you have to hire a tutor or do some research on your own.

So, if you have any questions about my projects, https://github.com/Jay-study-nildana/FrontEndForStudents/tree/main/ReactJSForStudents, I can help you. Any personal projects, sorry, I cannot help.

Take care.
Jay.

[parikshitreddy45]

@Jay-study-nildana thanks sir for your response