From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Creating button and input components

Creating button and input components - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Creating button and input components

“

So, now let's create the components for the submit button and the input boxes. First, let me clear this custom class from the label component. Alright, now let's create the button.jsx file inside the UI folder and I will define the component by saying export function button will say return and division. Let me copy the button from the page.jsx and will paste it inside the component. Now since this is a component, it needs to have dynamic values. So let's receive the props. I will say destructure and write class name, the event, onClick, children and then the rest of the props, so dot dot dot props. Instead of the text, I will render the children value and in the class name, I will call the CN method and wrap the parentheses around the string and will join the class name as well. And since this is a button, we will have to give the onClick event as well. So I will bring the class name to new line and then write onClick is equal to in the brackets onClick. Let's save this and include…

Contents