RenderFields component: Provide Values

default discord avatar
Alessio 🍣
10 months ago

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


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
    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:

    And the fieldSchema:


    But it doesn't seem to work

  • discord user avatar
    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: 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}>

    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 😦

  • discord user avatar
    Payload Team
    8 months ago

    well, here's the discrepancy:

           <Form onSubmit={() => {}} initialState={valuesNoUndefined}>


    is a fully formed form state, that should match this type:

    if you use React Devtools and look at the form state, we store all fields as a flat object - where the


    is the


    of the field, using dot notation for nesting / arrays / etc. and the


    matches the type above


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

    aaah thank you, buildStateFromSchema works perfectly here!

  • discord user avatar
    Payload Team
    8 months ago


    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


    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


    solution immediately after opening a thread

  • default discord avatar
    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!


Connect with the Payload Community on Discord



Can't find what you're looking for?

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