0

I'm trying to pass some property and function from react parent component called Layout to all of his children defined as this in routes.tsx:

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/createSession' component={ CreateSession } />
    <Route path='/questions' component={Questions} />
    <Route path='/summary' component={Summary} />
</Layout>;

In Layout component, I'm trying to add custom parameters like this:

const childWithProp = React.Children.map(this.props.children, (child) => {
            return React.cloneElement(React.Children.only(child), { add: this._onSubmit, reservations: someValue });
        });

But in child component called Questions, even if I have property of same name as exported in parent, it's undefined. Here is a part of code from child:

interface QuestionsCustomProps {
    reservations: string;
    add: Function;
}

type QuestionsProps =
    GlobalStore.GlobalState
    & QuestionsCustomProps
    & RouteComponentProps<{}>
    ;

class Questions extends React.Component<QuestionsProps, FetchDataExampleState> {
    constructor(props: QuestionsProps) {
        super(props);
        this.state = { collection: undefined, loading: true, showModal: false, modalErrorMessage: '' };

        this.handleErrors = this.handleErrors.bind(this);
        this.closeModal = this.closeModal.bind(this);


        this.getSpecificCollection = this.getSpecificCollection.bind(this);
        this.getFirstStep = this.getFirstStep.bind(this);

        /*if (typeof this.props.match.params.collectionId === 'undefined' || this.props.match.params.collectionId === null) {
            this.getFirstStep();
        }
        else {
            this.getSpecificCollection(this.props.match.params.collectionId);
        }*/

        if (this.props.sessionId !== '' && this.props.sessionId !== undefined) {
            if (this.state.collection === undefined) {
                this.getFirstStep(this.props.sessionId);
            }
            else {
                this.getSpecificCollection(this.state.collection.id, this.props.sessionId);
            }
        }
        //else {
        //    this.state = { collection: undefined, loading: false, showModal: true, modalErrorMessage: 'No session exists - create one first!' };
        //}

        //this.getData = this.getData.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.getPreviousStep = this.getPreviousStep.bind(this);
        this.componentWillReceiveProps = this.componentWillReceiveProps.bind(this);

    }

 public render .......
}

Is there any other way how to pass params to child using this.props.children? Many thanks for any response!

Peter T
  • 13
  • 6

0 Answers0