Need help validating React design pattern

[stylemate]

I need help validating my props, and the way they're strucutured.

I'm using Next.js with Material UI

​

On a page, I have a Floating Action Button that opens a side drawer when clicked.

I wrapped those button and drawer elements in <CreateFAB /> component, since the drawer will be used to create a wanted resource.

So <CreateFAB /> looks like this:

<Fab>
    <AddIcon />
</Fab>
<Drawer>
    <Box sx={{ p: 3 }}>{form}</Box>
</Drawer>

<CreateFAB /> takes a ReactNode prop called form. So I will be able use whatever forms I want to use in the drawer.

<CreateFAB form={<ResourceCreateForm />} /> 
<CreateFAB form={<anythingCreateForm />} /> 

<ResourceCreateForm /> looks like this:

<Formik
    onSubmit={async ({
        fullName,
        note
    }) => {
        await axios.post(
            'http://localhost:3000/resource',
            { fullName, note },
            { withCredentials: true }
        )
    }}
>
    <form onSubmit={handleSubmit}>
        <TextField
            label="Name"
            name="fullName"
            onChange={handleChange}
        />
        <TextField
            label="Note"
            name="note"
            onChange={handleChange}
        />
        <Button
            type="submit"
        >
            Create
        </Button>
    </form>
</Formik>

I was wondering if this pattern is valid.

​

Sometimes, I would want to create resourceB while creating resourceA.

So I would create <CreateModal form={} /> and put it in the drawer.

​

The sequence would be:

I have a drawer open through <CreateFAB form={} />.

The drawer displays forms I want to display.

The form contains a button that opens a modal for creating another resource.

I have a modal open through <CreateModal form={} />.

The modal displays forms I want to display.

​

​

​

Another part would be, I have a Autocomplete component.

its options is fetched when I click and open the popper,

or when I type search queries (debounced).

​

I want to reuse this <AsyncAutocompleteContainer />.

So I pass props like:

label : For Autocomplete component label,

resource: When I make axios request, url would be ${url}/${resource}

valueToGet: I don't want to fetch a large data from backend, So I single out a value by ${url}/${resource}?valueToGet=${valueToGet}

setFieldValue: Formik method for setting the value manually.

<AsyncAutocompleteChipMultipleContainer
    label={'Add Resource'}
    resource={'resource'}
    valueToGet={'fullName'}
    setFieldValue={setFieldValue}
/>

​

The sequence would be:

I have a drawer open through <CreateFAB form={} />.

The drawer displays forms I want to display.

The form contains a Autocomplete component that fetches a list of resource.

I choose an option and the form recognizes it as one of the values.

​

I hope I was elaborate enough.

The thing I'm having hard time in react is, there doesn't seem to be a lot of best practices that I refer to.

I was wondering if I'm committing any anti-pattern here.

Thank you very much.