From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB
Join today to access over 25,200 courses taught by industry experts.
Property search component - Next.js Tutorial
From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB
Property search component
Okay, so we're going to start to implement the search and there's a few steps to this, a few videos. So first we want to take the form out of the hero and put it into its own component. We want to add the state for the inputs and then handle the submission which is going to submit to a search results page and on that search results page we'll have a use effect that will call to the API route and in the API route we'll search a bunch of different fields for whatever we pass in here, the location. You can also put the keywords for the name and description and all that, as well as the type of rental. So let's start off by just taking the search form out of the Hero component. So if we go to Hero, basically we're just going to cut the form. So we'll go ahead and cut that. And then let's create a new component in the components folder called property search. We'll call it property search form dot JSX. And then RAFCE. And let's get rid of this and place the form in there. Save that. And…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.