React-Admin TextField and TextInput not showing label and css

Question

In React-Admin when i move the child components to another component and try to render it inside the simpleform tag then textfields are not showing its value and textinput tag CSS also goes missing. what i am trying to do is to create a common component for the create and edit tag so i break it down it to multiple components and then try to render it using props.children

export const AssessmentEdit = props => {
return (
    <CommonComponents {...props} componentType='edit' notif='Assessment Preference Updated successfully' redirect='list' validation={validateAssessment}>
        <FormData {...props} componentType='edit'/>
    </CommonComponents>
)

};

const CommonComponent = (props) => {
const notify = useNotify();
const redirect = useRedirect();
const onSuccess = () => {
    notify(props.notif);
    redirect(props.redirect, props.basePath);
};
const Compo = components[props.componentType];
console.log(props.componentType)
return (
    <Compo {...props}
           undoable={false}
           onSuccess={onSuccess}>
        {props.componentType === 'show' ? <SimpleShowLayout>
            {props.children}
        </SimpleShowLayout> : <SimpleForm
            redirect={props.redirect}
            validate={props.validation}>
            {props.children}
        </SimpleForm>}

    </Compo>
);

};

export const FormData = (props) => {
const classes = utilStyles();
return (
    <React.Fragment>
        {props.componentType === 'edit' && <>
            <TextField {...props} source="id" label="Id"/>
            <TextField {...props} source="organization_id" label="Organization"/>
            <TextField {...props} source="provider" label="Provider"/>
        </>}
        <TextInput  source="name" label={'Name *'}/>
        <SelectInput source="category"
                     label={'Category *'}
                     choices={AssessmentCategory}
                     optionText="name"
                     optionValue="value"/>
        <ArrayInput source="topics">
            <SimpleFormIterator>
                <TextInput/>
            </SimpleFormIterator>
        </ArrayInput>
        <TextInput source="description"
                   label={'Description *'}
                   className={classes.fullWidth}
                   options={{multiLine: true}}/>
        <RichTextInput source="instructions"
                       label={'Instructions *'}/>
        <NumberInput source="duration"
                     label={'Duration *'}/>
        <BooleanInput source="randomize_questions"/>
        <FormDataConsumer>
            {({formData, formData: {randomize_questions}}) => {
                if (randomize_questions) {
                    return <NumberInput source="question_count" label={'Question Count *'}/>
                }
                return null;
            }}
        </FormDataConsumer>
        <ArrayInput source="questions"
                    label={'Questions *'}>
            <SimpleFormIterator>
                <ReferenceInput source="questionId"
                                className={classes.fullWidth}
                                label={"Question"}
                                reference="search-questions">
                    <AutocompleteInput optionValue="id"
                                       matchSuggestion={() => true}
                                       inputText={(value) => {
                                           return value && value.question_text && value.question_text.slice(0, 200)
                                       }}
                                       className={classes.fullWidth}
                                       optionText={<Custom/>}/>
                </ReferenceInput>
                <NumberInput label="Question Weight" source="question_weight"/>
            </SimpleFormIterator>
        </ArrayInput>
        <ArrayInput source="skills" label={'Skills *'}>
            <SimpleFormIterator>
                <ReferenceInput source="skillId"
                                label={"Skill"}
                                className={classes.fullWidth}
                                reference="perform-skill-search">
                    <AutocompleteInput optionValue="id"
                                       className={classes.fullWidth}
                                       optionText="display_name"/>
                </ReferenceInput>
                <SelectInput label="Skill Level"
                             choices={levels}
                             optionText="key"
                             optionValue="value"
                             source="skill_level"/>
            </SimpleFormIterator>
        </ArrayInput>
    </React.Fragment>
);

};

Answer 1

I ended up creating my own TextField component and explicitely passing down the props:

interface CustomTextFieldProps {
  label?: string,
  record?: Record,
  source: string
}

const CustomTextField = (props: CustomTextFieldProps) => (
    <Labeled label={props.label ? props.label : startCase(props.source)}>
        <span>{get(props.record, props.source)}</span>
    </Labeled>
);

Usage:

    <CustomTextField source="fieldName" record={props.record} />