Flexible Content Field in Advanced Custom Fields

Hello! I’m using Advanced Custom Fields with a Frontity Project and since it’s more component driven, I’m using the Flexible Content field to render some components so that users can re-arrange components as needed or have multiples of components. I did this in PHP with this loop:

<?php if (have_rows('content_blocks')) :
while (have_rows('content_blocks')) :
$row = the_row();
$layout = get_row_layout();
get_template_part('custom/components/' . $layout);
endwhile;
endif; ?>

I’m wondering what the best approach would be in React + Frontity?
Ideally I’d have a sort of component router that would take each layout within a Flexible Content block on a page, and then render that partial. I’m not super familiar with how to handle this within React! Any help would be appreciated!

Hi @min :wave:

Not sure if I understood it correctly but I feel your approach seems pretty good. ACF is showing all the content for each post in the Rest API, under content_blocks field, which is an array of your different components with all their data. They seem to be ordered so I guess the best option would be to iterate through this array and show whatever you want.

Yes, I think getting the data from the post.acf field makes more sense than rendering it to HTML.

Then, you can iterate over the data like this:

const Page = ({ state }) => {
  const data = state.source.get(state.router.link);
  const post = state.source.page[data.id];
  // This is the array of Flexible Content blocks.
  const blocks = post.acf.content_blocks; 

  return (
    <>
       ...
       {blocks.map(block => {
         if (block.acf_fc_layout === "who_we_are")
           return <Who block={block} />;

         if (block.acf_fc_layout === "team_members")
           return <Team block={block} />;

         if (block.acf_fc_layout === "testimonial")
           return <Testimonial block={block} />;
       }))
       ...
    </>
  );
}