RenderFields component: Provide Values

default discord avatar
Alessio 🍣
10 months ago
31

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

  • discord user avatar
    jmikrut
    Payload Team
    10 months ago

    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

  • default discord avatar
    Alessio 🍣
    10 months ago

    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_BOjZZd40

    And the fieldSchema:

    https://paaster.io/mnJDQmxpFHctl8JKUA5zk#aldIv1q3GNY2dlDBYuiyrALiYGVBY9EL7mWzeaxS2XQ

    Component:

    https://paaster.io/eZAuYTo4WSORTKNFsqQ4B#x0jqpiuVvf6yPY6OcCFHTg7UmzEDG4zdrXZYAdHYITE


    But it doesn't seem to work

    CleanShot_2023-01-13_at_11.48.022x.jpg
  • discord user avatar
    jesschow
    Payload Team
    9 months ago

    hey @Alessio 🍣 figured I'd check in on this old one - did you get what you need here?

  • default discord avatar
    Alessio 🍣
    9 months ago

    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:


    https://pastebin.com/mxJdZ5t2

    And the fieldschema:


    https://pastebin.com/TJGvAazu


    As you can see, "values"/"valuesNoUndefined" which is fed into the Form initialState does have values!



    But it's still displaying as empty fields 😦

  • discord user avatar
    jmikrut
    Payload Team
    8 months ago

    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
  • default discord avatar
    Alessio 🍣
    8 months ago

    aaah thank you, buildStateFromSchema works perfectly here!

  • discord user avatar
    jmikrut
    Payload Team
    8 months ago

    beautiful



    i cant wait to have these types of threads on our website



    this is good stuff

  • default discord avatar
    Alessio 🍣
    8 months ago

    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

    understands

    the 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

    potential

    solution immediately after opening a thread

  • default discord avatar
    Jarrod
    8 months ago

    They “used” to?

  • default discord avatar
    Alessio 🍣
    8 months ago

    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

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.