Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

RenderFields component: Provide Values

discord user avatar
alessiogr
2 years ago
10

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
    2 years 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

  • discord user avatar
    alessiogr
    2 years 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

  • default discord avatar
    jessrynkar2 years ago

    hey

    @360823574644129795

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

  • discord user avatar
    alessiogr
    2 years 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
    2 years 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
  • discord user avatar
    alessiogr
    2 years ago

    aaah thank you, buildStateFromSchema works perfectly here!

  • discord user avatar
    jmikrut
    2 years ago

    beautiful



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



    this is good stuff

  • discord user avatar
    alessiogr
    2 years 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

  • discord user avatar
    jarrod_not_jared
    2 years ago

    They “used” to?

  • discord user avatar
    alessiogr
    2 years 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

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.