where do we get the props in render method in React.js

Question

i have passed a component to child element , one thing i am confused about is render methods get props as parameters and then we pass them as props to other element. where and how are we getting these props inside parameters of render method . check the code and specifically the render method and props used in it thanks

here is the code:

return (
    <div>
      <Route
        {...rest}
        render={(props) =>
          localStorage.getItem("authToken") ? (
            <Component {...props} />
          ) : (
            <Redirect to="/" />
          )
        }
      />
    </div>

here is code from parent element

 <Privateroute exact path="/signup"   component={Register} />

Answer 1

If you want to think abou the props at first you have to understand parameters in functions.

In function you can call a function with parameters. The parameters are optional if you pass it will pass the value, if you don't pass it will be null. Sometime if you use default value for a parameter in function definition it will hold that value.

Let's come to props now. props are same as parameters. But in this case. React does this for you and it is dynamic. Whatever props you will pass with the component and react by default will pass some extra props.

So the props are automatically generated by react if you use any global component. Like history, location, and etc are passed or created if you use react-router-dom browser router.

Finally. In one words props are same as parameters and react also create dome dynamically.