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!