reactjs - How to pass in props to Link Router?

Question

Hello I want to pass in props to another component through Link Router

I am using Class Component

  constructor(props: IBanner) {
    super(props);
    this.state = {

      jobCategories: [],
      jobKeyword: "",
      jobLocation: "",
   };


  } 

and here is my Link Router

 <Link {{
                pathname: '/search-results',
                state: {
                  jobKeyword: this.state.jobKeyword, jobLocation: this.state.jobLocation
                  }
                  }}>
                <li className="ktp-banner-submit">
                  {" "}
                  <input type="submit" value="" />{" "}
                  <i className="ktp-icon ktp-search"></i>{" "}
                </li>
                </Link>

However I am getting an error of Property 'to' is missing in type '{ children: Element; pathname: string; state: { jobKeyword: string; jobLocation: string; }; }' but required in type 'LinkProps'

What error is this and what can i do to mitigate this/

Answer 1

You forgot to attribute. Try this:

<Link
  to={{
    pathname: '/search-results',
    state: {
      jobKeyword: this.state.jobKeyword, jobLocation: this.state.jobLocation
    }
  }}
/>

You cannot do something like this in React:

<Component {obj} />

You need to assign that object to an attribute:

<Component p={obj} />

Or you can destruct the object(attributes):

<Component ...{{name:'foo', lastName: 'bar'}} />

Which translates to:

<Component name='foo' lastName='bar' />