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>
);

};

yve · Accepted Answer · 2021-04-09 09:17:12Z

3

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} />

answered Apr 9, 2021 at 9:17

yve

462 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darshna Rekha Over a year ago

Can you elaborate more? How is this solving the issue posted here?

yve Over a year ago

The react-admin default TextField won't show up when used inside a <></> or <React.Fragment></React.Fragment> or similar due to messed up magic. Try out replacing TextField in your code with the custom made text field component, it should then show up.

Collectives™ on Stack Overflow

React-Admin TextField and TextInput not showing label and css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related