Passing data (props) from Main Layout to page

help
1

Hi.

I have the data user in my layout. This is the code.

// Called by routes.js
import React from 'react';
import { createContainer } from 'meteor/react-meteor-data';

// Components
import Sidebar from '../components/settings/sidebar';
import MiniMenu from '../components/settings/mini_menu';
import Loader from '../components/helpers/loader';

const SettingsLayout = (props) => {
    if (!props.userData) return(<Loader />);
    else
    return (
      <div id="settingsLayout">
        <Sidebar userData={props.userData} />
        <MiniMenu />
        <div className="pusher content-right">
            {props.main}
        </div>
      </div>
    );
}
export default createContainer(props => {
  return {
    userData: Meteor.user()
  };
}, SettingsLayout);

So. I want to pass the “userData” prop to component. If we can see the route.

> // Settings
> FlowRouter.route ('/settings', {
>     name: 'Settings.show',
>       triggersEnter: [
>         (context, redirect) => {
>             if (!Meteor.userId()) {
>                 redirect('/');
>             }
>         }
>     ],
>       action() {
>         mount(SettingsLayout, {
>           main: <SettingsIndex />,
>         })
>       },
> });

So. How i can pass the userData variable to the SettingsIndex page? Code

> // Called by ../layouts/settings_layout (by Routes)
> import React from 'react';

> // Componentes
> import Title from '../../components/settings/title';
> import Profile from '../../components/settings/profile';

> const SettingsIndex = (props) => (
>     <div>
>         <Title title="Configuración de la cuenta" button="savechanges"/>
>         <div className="ui two column container grid">
>             <Profile />
>         </div>
>     </div>
> )

> export default SettingsIndex;
1 Like
2

Does this do the trick for you?

FlowRouter.route( '/cookies/:cookie', {
  name: 'cookies',
  action( params ) {
    ReactLayout.render( App, { yield: <Cookies cookie={params.cookie} /> } );
  }
});

Credit: Meteor Chef: Using Flow Router with React #tmc-passing-params

How did I find this?: https://www.google.com/search?q=meteor+react+flow+router+passing+props - It’s the first link for me.

Sometimes the hardest thing in programming is figuring out how to ask the right question, yeah? I have this problem all the time. I hope this helps you.

Based on your example there - it looks like you could probably just add the variable right into your JSX, no? Did you try that?

3

No. Is not the problem. I made a solution.

in my layout

const SettingsLayout = (props) => {
    if (!props.userData) return(<Loader />);
    else
    return (
      <div id="settingsLayout">
        <Sidebar userData={props.userData} />
        <MiniMenu />
        <div className="pusher content-right">
            {props.main(props.userData)}
        </div>
      </div>
    );
}

I passed a function in props main. Then in my route.

// Settings
FlowRouter.route ('/settings', {
    name: 'Settings.show',
      triggersEnter: [
        (context, redirect) => {
            if (!Meteor.userId()) {
                redirect('/');
            }
        }
    ],
      action() {
        mount(SettingsLayout, {
          main: (userData) => (<SettingsIndex userData={userData}/>),
        })
      },
});

Done! I passed the userData prop from the layout to the page via routes.js