RenderFields component: Provide Values

Alessio 🍣

10 months ago

31

• 

  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

• 

  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

  
• 

  jesschow

  Payload Team

  9 months ago

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

• 

  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 😦

• 

  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
• 

  Alessio 🍣

  8 months ago

  aaah thank you, buildStateFromSchema works perfectly here!

• 

  jmikrut

  Payload Team

  8 months ago

  beautiful

  
  

  
  

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

  
  

  
  

  this is good stuff

• 

  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

• 

  Jarrod

  8 months ago

  They “used” to?

• 

  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