How can I provide values to the RenderFields component? I have a fieldschema, and want to render them with values already assigned to them
(reason: I'm implementing payload's
Blocks
field inside of the richtext editor)
With RenderFields I'm planning to render the fields I set in a modal inside of the editor (which accepts a react component). However, so far I only managed to display the fields without initial values
so RenderFields just renders the fields themselves that then subscribe to the parent form state
so there should be a parent form for wherever you render RenderFields
aaah right, thank you! I've tried that, but it does not seem to update the value of RenderFields.
Here's the initialValue I'm inputting:
https://paaster.io/SfWoS_mdynBdOS4FzmuZB#mKroXRCAWATFK3NICbRk7UWe-2wNc5VrB4_BOjZZd40And the fieldSchema:
https://paaster.io/mnJDQmxpFHctl8JKUA5zk#aldIv1q3GNY2dlDBYuiyrALiYGVBY9EL7mWzeaxS2XQComponent:
https://paaster.io/eZAuYTo4WSORTKNFsqQ4B#x0jqpiuVvf6yPY6OcCFHTg7UmzEDG4zdrXZYAdHYITE
But it doesn't seem to work
hey @Alessio 🍣 figured I'd check in on this old one - did you get what you need here?
Hey! Still didn't figure this out sadly, but I set the project where I needed it on hold for now
I'm looking into it again and this still doesn't work for me. I got this code:
import * as React from "react";
import { Suspense, useEffect, useState } from "react";
import { Block, Field } from 'payload/types';
import { Data, Fields } from 'payload/dist/admin/components/forms/Form/types';
import Form from "payload/dist/admin/components/forms/Form";
import FormSubmit from "payload/dist/admin/components/forms/Submit";
import fieldTypes from "payload/dist/admin/components/forms/field-types";
import RenderFields from "payload/dist/admin/components/forms/RenderFields";
export default function PayloadBlockDisplayComponent({
block,
values
}: {
block: Block,
values: Data
}): JSX.Element {
console.log("Values", values)
console.log("Fieldschema", block)
let valuesNoUndefined: Fields = values;
// remove undefined fields
Object.keys(valuesNoUndefined).forEach((key) => {
if (valuesNoUndefined[key] === undefined) {
delete valuesNoUndefined[key];
}
});
console.log("valuesNoUndefined", valuesNoUndefined)
return (
<Suspense fallback={<span>Loading block...</span>}>
<Form onSubmit={() => {}} initialState={valuesNoUndefined}>
<RenderFields
fieldTypes={fieldTypes}
readOnly={false}
fieldSchema={block.fields}
forceRender
/>
<FormSubmit>Ignore</FormSubmit>
</Form>
</Suspense>
);
}
But it displays nothing, even if "valuesNoUndefined"/"values" is set
As an example, this is the "values" I'm providing:
And the fieldschema:
As you can see, "values"/"valuesNoUndefined" which is fed into the Form initialState does have values!
But it's still displaying as empty fields 😦
well, here's the discrepancy:
<Form onSubmit={() => {}} initialState={valuesNoUndefined}>
initialState
is a fully formed form state, that should match this type:
https://github.com/payloadcms/payload/blob/master/src/admin/components/forms/Form/types.ts#L4
if you use React Devtools and look at the form state, we store all fields as a flat object - where the
key
is the
path
of the field, using dot notation for nesting / arrays / etc. and the
value
matches the type above
BUT
to create this form state, you can use the function that we rely on internally, which matches up a field schema to field data, and generates the form state for you
you can see that in use within the default collection Edit view, here:
https://github.com/payloadcms/payload/blob/master/src/admin/components/views/collections/Edit/index.tsx#L74
aaah thank you, buildStateFromSchema works perfectly here!
beautiful
i cant wait to have these types of threads on our website
this is good stuff
Yep - I saw the beta version you put on that website - it's looking great!
Would be dope if you can add a discord bot / search functionality which
understandsthe text as well. E.g. so if I search for "Show payload fields in a component"or something like that, it would find the "RenderFields component" thread as well.
Discord's internal search functionality is a complete failure in that regard
In Railway's discord they used to have a bot which searches their docs/discord threads contextually every time a new thread is opened, and provide a
potentialsolution immediately after opening a thread
They “used” to?
yea, they still have it but now it just links to their relevant docs page. It says "experimental" so they're prob still playing with it 🤷♂️
would be trivial to implement though
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.