Got error when importing function react componets

Question

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?

You should use values directly from state, not pass props to the component. — Code-Apprentice
– Code-Apprentice, Commented Aug 21, 2020 at 22:21

Shadab · Accepted Answer · 2020-08-21 22:21:18Z

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>

There are a few ways to render components inside a <Route />, and all three of them receive the same props (although their behavior is slightly different). You can read more about them here: reactrouter.com/web/api/Route/component

Giovanni Esposito · Accepted Answer · 2020-08-21 22:26:20Z

0

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='' />} />

answered Aug 21, 2020 at 22:26

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

2 Comments

Shadab Over a year ago

I think you'd want to use render={..} instead of component={...} here, if you want the route props to be passed to the component

Giovanni Esposito Over a year ago

@Shadab Yes you could use render like render={(props) => ...} but also component with arrow function works.

Collectives™ on Stack Overflow

Got error when importing function react componets

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related