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 input component

Creating input component - 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 input component

“

Now, I will create the input component. So I will create the file input.jsx inside UI folder and inside I will say export default function input. Let me go to the header.jsx and copy and input tag and paste it over here. Now we will take values of type, placeholder, class name in props. So let me receive the props over here. I will have type comma class name comma dot dot dot props. So the props will contain the rest of the props passed as we have used it as rest operator which may include attributes like placeholder etc. Let me import the cn function from utils, giving the values to the input tag, type is equal to type, class name, we will say cn custom hyphen input comma class name. We will remove the placeholder from here and instead we will spread the props as it is, so I will say curly brackets dot dot dot props. Let's save the file and move to header JSX file. Now here I am going to import the input from dot dot UI input and will replace the input tag by saying input placeholder…

Contents