0

I am currently using Next.js and it's completely new to me. I am trying to get the search functionality to work but I am unable to get it.

Basically, I am trying to search data using a textbox in a different component and display the data in a different component.

I have searched for several solutions in stack overflow but couldn't find any related solution. I believe that the problem is I am not able to pass the data from one component to another.

This is a snippet from my app.js

function sample({ Component, pageProps }) {
    .
    .
    .

    const [searchState, setSearch] = useState("")
    .
    .
    .
    return{
        <div className='search'>
          <input type='text' className='searchtext' placeholder='search...' onChange= 
          {(event) => {setSearch(event.target.value)} } />
        </div>
        .
        .
        .
        <div className="sub-navs">
             <Link 
               href="/"
               render={props => { <Home {...props} searchData = {searchState} /> }}
             >
               <a className="nav-btn">
                 Home
               </a>
             </Link>
        </div>
    }

This is a snippet from my index.js

export default function Home(searchData) {
    .
    .
    .

    console.log(searchData)

Outputs

In the first code snippet, I am able to get the search text (string) but in the second it's showing an empty object.

Rahul Rajan
  • 1
  • You should be using the Next.js built-in [`next/link`](https://nextjs.org/docs/api-reference/next/link) rather than React Router. – juliomalves Jan 05 '22 at 14:16
  • Also, you can't pass props through `next/link`, you have to pass the data through query params instead. See https://stackoverflow.com/questions/61927604/pass-custom-prop-or-data-to-next-js-link-component. – juliomalves Jan 05 '22 at 14:17
  • Thank you @juliomalves for replying, I tried to pass the props but it didn't work the way it's shown in the link provided. – Rahul Rajan Jan 13 '22 at 10:54
  • Can you update your question with what you've tried? – juliomalves Jan 13 '22 at 11:20
  • 1
    I just forgot to add the square brackets to the dynamic route. Now it's working. Thank You @juliomalves – Rahul Rajan Jan 24 '22 at 07:28
  • Feel free to post the solution that worked for you as an answer to your own question. – juliomalves Jan 24 '22 at 08:38

0 Answers0