Importing Blocks into a react component

muhammadmustafaahmaa12 months ago

8

• 

  markatomniux12 months ago

  Kind of. Try the RenderFields component from

  payload/components/forms

  ;

  
  
  

  import { RenderFields, fieldTypes } from 'payload/components/forms';
  
  const MyComponent = () => {
  
    return (
      <RenderFields
      fieldTypes={fieldTypes}
      fieldSchema={[
          {
              name: 'title',
              label: 'Title',
              type: 'text',                           
              required: true,
          },
        ]}
      />
    )
  }

• 

  muhammadmustafaahmaa12 months ago

  I'm currently using this one as well, but I have some issue on injecting data into it

  
  
  

  let's say I have a state storing an object like this:

  
  

  object = {
    name: 'object',
    segments: [],
  }

  
  

  is there a way for me to inject the segments into the RenderFields?

  
  
  

  // Fields
  const fields: Field[] = [
      {
        name: 'segments',
        type: 'blocks',
        admin: {
          initCollapsed: true,
        },
        blocks: [Image, Html],
      },
    ];
  
  // Rendering
  return (
      <>
        <RenderFields
          fieldSchema={fields}
          fieldTypes={fieldTypes}
        />
      </>
    );

• 

  markatomniux12 months ago

  yes, using a useState hook and passing that when the value changes

• 

  muhammadmustafaahmaa12 months ago

  do you have a sample code that i can use as a reference?

• 

  markatomniux12 months ago

  Am I correct in thinking your Segments relate to fields/blocks?

• 

  muhammadmustafaahmaa12 months ago

  yeap, i'm trying to implement blocks field into a react component

• 

  markatomniux12 months ago

  const [fields, setFields] = useState<Field[]>([
      {
        name: 'segments',
        type: 'blocks',
        admin: {
          initCollapsed: true,
        },
        blocks: [Image, Html],
      },
    ]);
  
  useEffect(() => {
    setFields(...)
  }, [something])
  
  function changeBlocks() {
    setFields(...)
  }
  
  return (
      <>
        <RenderFields
          fieldSchema={fields}
          fieldTypes={fieldTypes}
        />
      </>
    );

  
  
  

  Just an example

  
  
  

  if you want to change the fields when a prop is changed, trigger the change in useEffect. If you want to update it on a button click or some other event, run it in a function/const

• 

  muhammadmustafaahmaa12 months ago

  nice! this really help me. thank you so much Mark!