React - Pass and Read Props to Inner Components

Question

I found my self working with a react template and route. I am not able to pass props to inner component in order to change page title.

Route are defined as below in the template a I added "title" props for each routes in order to pass to inner components.

const loadable = loader =>
  Loadable({
    loader,
    delay: false,
    loading: () => null,
  })

const loadableRoutes = {
  '/registration': {
       component: loadable(() => import('sm-pages/RegistrationPage')),
       title : "Registration"
  },

  '/registrationSuccess': {
        component: loadable(() => import('sm-pages/RegistrationPage')),
        title : "Registration Success"
   },

  ...

  render() {
    return (
      <ConnectedSwitch>
        <Route exact path="/" component={HomePage} />
        {Object.keys(loadableRoutes).map(path => {
          const { exact, ...props } = loadableRoutes[path]
          props.exact = exact === void 0 || exact || false // set true as default
          return <Route key={path} path={path} {...props} />
        })}
        <Route
          render={() => (
            <Page>
              <NotFoundPage />
            </Page>
          )}
        />
      </ConnectedSwitch>
    )
  }

The template has differents inner components and at some point it render my component as below:

render() {
    const { getContentBuffer } = this.context
    const { pathName, content } = getContentBuffer()
    return isEmpty(content) ? (
      <div className="utils__loadingPage" />
    ) : (
      <div className="utils__content">
        <Breadcrumb name={pathName} />
        {content}
      </div>
    )
  }

I access to props (without success) in my component in this way:

 render() {  
    const props = this.props
    return (        
        <h1>{this.props.title}</h1>
    )
  }

How I have to change in order to access to title props?

Thanks in advance

What is `Loadable`? Is it able to pass props at all? – Estus Flask Oct 03 '18 at 12:28 — Estus Flask, Oct 03 '18 at 12:28

score 0 · Answer 1 · answered Oct 03 '18 at 12:36

This is a problem that is similar to this question. Props are passed to Route component instead of component.

Considering that loadable is able to pass props to imported component, it likely should be:

  let { exact = true, component: WrappedComponent, ...routeProps} = loadableRoutes[path]
  exact = !!exact; // set true as default
  const WrapperComponent = props => <WrappedComponent {...routeProps} {...props}/>;
  return <Route key={path} path={path} exact={exact} component={WrapperComponent} />

Thanks @estus, I will try soon – fciri Oct 03 '18 at 14:33 — fciri, Oct 03 '18 at 14:33

score 0 · Answer 2 · answered Oct 03 '18 at 17:14

In our project we created helper component, which transfer all props from Route to Component:

// @flow
import * as React from 'react';
import {Route} from 'react-router';
import PropTypes from 'prop-types';

type Props = { component: React.ComponentType<*> };

export default class RouteProps extends React.Component<Props> {
    static propTypes = {
        component: PropTypes.func.isRequired,
    };

    renderMergedProps = (component: React.ComponentType<*>, ...rest: Array<Object>) =>
        React.createElement(component, Object.assign({}, ...rest));

    render() {
        const {component, ...rest} = this.props;
        return (<Route {...rest} render={routeProps =>
            this.renderMergedProps(component, routeProps, rest)}/>);
    }
}

You can just simply use it as usual:

<RouteProps path="/" component={HomePage} {...propsForHomePage}/>

score 0 · Answer 3 · answered Jan 20 '19 at 23:10

Try this .. https://github.com/MrCookiez/onemiracle/tree/routes-setup

import React from 'react';
import styled from 'styled-components';

const Title = ({ title }) => <h1>{title}</h1>;

const HeroTitle = styled(Title)`
    text-align: center;
`;

const Hero = (props) =>  {  
    return (
        <HeroTitle title={ props.title } />
    );
};

export default Hero;

React - Pass and Read Props to Inner Components

3 Answers3