CODEWITHSUNDEEP
reactjs
Mahi
Mahi

Reputation: 107

Got error when importing function react componets

I have a function componet in react which get some props as follow:

export default function ThermoBreastCancerIntroPage(props) {
  console.log('rest is logged in is')
  console.log(props.is_logged_in);
  const [is_logged_in, set_is_logged_in] = useState(props.is_looged_in);
  const [fname, set_fname] = useState(props.fname);
  const [lname, set_lname] = useState(props.lname);

in my index.js I import it and then want to use it

import ThermoBreastCancerPage from "views/LandingPage/ThermoBreastCancerPage.js";

    ReactDOM.render(
      <Router history={hist}>
        <Switch>
           
          <Route path="/thermo-breast-cancer" component={<ThermoBreastCancerPage is_logged_in='false' fname='' lname='' />} />
        </Switch>
      </Router>

But in above, I got error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

when I change to component={ThermoBreastCancerPage} I wont get any error but I have to pass props in some way. I am new to react and not sure where I am doing wrong?

Upvotes: 0

Views: 37

Answers (2)

Giovanni Esposito
Giovanni Esposito

Reputation: 11156

Ciao, to pass props on component in Route component you have to use an arrow function in this way:

<Route path="/thermo-breast-cancer" component={() => <ThermoBreastCancerPage is_logged_in='false' fname='' lname='' />} />

Upvotes: 0

Shadab
Shadab

Reputation: 1347

You can try changing this

<Route path="/thermo-breast-cancer" component={<ThermoBreastCancerPage is_logged_in='false' fname='' lname='' />} />

to this

<Route path="/thermo-breast-cancer">
  <ThermoBreastCancerPage is_logged_in='false' fname='' lname='' />
</Route>

Upvotes: 2

Related Questions