CODEWITHSUNDEEP
reactjsadvanced-custom-fieldsrepeater
CamposR
CamposR

Reputation: 31

AFC Repeater and wp-rest api in React.js

Need to render ACF repeater in react. I am able to display ACF text Fields but not repeater fields. Need to find out if anyone has an example of how to map through a repeater field.

Repeater field group Is called Skills.

Upvotes: 2

Views: 1225

Answers (1)

Slingy
Slingy

Reputation: 101

Im also new in this stuff, but I will try to help you.

So, the first thing that you need is to download and install ACF to REST API plugin so you can use ACF with Wordpress API. I assume, that you already have it, because as you said before - you can display text fields.

Once you can send data through Wordpress API, you need to preview of JSON sent by Wordpress (in this case), so you can display necessary data. Mine is called React Developer Tools and I installed it as Chrome extension.

Link to Chrome store

It should look like this:

enter image description here

As you can see, my component is called Home.js, yours may be called differently. Chose component that is fetching all the data that you need.

Now, you just need to use your repeater. It would be much easier if you showed us your code. I don't really know what kind of data you are calling through api, so I guess these are pages.

{ pages[0].acf.technologie_lista.map ( (field, index) => (
     <div key={index} className="single-field">
        { field.nazwa_technologii }
     </div>
) ) }

Let's break it down.

1 - My project contains two pages. I have chosen the first one, because only this one has needed ACF fields. technologie_lista is acf field name.

2 - You need to use map function to list all posts. You need to assign key to each element.

  1. nazwa_technologii is just a repeater sub field name.

And that's all. I might make some rookie mistakes, but it work's for me. I hope that i helped. Cheers!

Upvotes: 1

Related Questions