Using Advanced Custom Fields Repeater Field in Next.js

Question

I'm struggling to use an ACF repeater field within my Next.js project. I have a block which has a repeater field with sub fields, I can get the data however I'm not sure how to put it within a loop.

This is my js file:

export default function TableOfContents(attributes) {

    //Collect Data from Block
    const parsedData = JSON.parse(attributes.attributesJSON).data;

    //Count number of rows (returns 3)
    const number = parsedData.rows;

    //Create Array called Table to allow me to loop through 3 times
    const Table = [...Array(number)];

    return (
        <section className={styles.tableOfContentsBlock}>
            <p className="SBH5">Contents</p>
            <ul>
                //Array to loop through, invalid as placeholder and index as number
                {Table.map((invalid, index) => {

                    //Set field name (should return 'rows_0_title', then 'rows_1_title' etc)
                    const row = 'rows_' + index + '_title';
                    const all = parsedData;

                    return (
                    <li>
                        {/* Return field name as value */}
                        {/* <a href="#" className=''>{parsedData.rows_0_title}</a> */}
                        <a href="#" className=''>Title Goes Here</a>
                    </li>
                    )
                })}
            </ul>
        </section>
    )
}

When I console.log parsedData I get the following:

rows: 3
rows_0_anchor: "what-is-image-resolution"
rows_0_title: "What is image resolution?"
rows_1_anchor: "why-is-image-resolution-important"
rows_1_title: "Why is image resolution important?"
rows_2_anchor: "What-image-resolution-should-I-use"
rows_2_title: "What image resolution should I use?"
_rows: "field_6203e67f1c991"
_rows_0_anchor: "field_6203e6951c993"
_rows_0_title: "field_6203e68b1c992"
_rows_1_anchor: "field_6203e6951c993"
_rows_1_title: "field_6203e68b1c992"
_rows_2_anchor: "field_6203e6951c993"
_rows_2_title: "field_6203e68b1c992"
[[Prototype]]: Object

As you can see i need to loop through the fields replacing the number in the middle however it doesn't work, it just returns a blank a tag.

Answer 1

You have to use the row variable as the key when accessing the parsedData fields.

export default function TableOfContents(props) {
    const parsedData = JSON.parse(props.attributesJSON).data;
    const number = parsedData.rows;
    const table = [...Array(number)];

    return (
        <section className={styles.tableOfContentsBlock}>
            <p className="SBH5">Contents</p>
            <ul>
                {table.map((_, index) => {
                    const row = `rows_${index}_title`;
                    const anchor = `rows_${index}_anchor`;

                    return (
                        <li key={row}>
                            <a href={`#${parsedData[anchor]}`} className="">
                                {parsedData[row]}
                            </a>
                        </li>
                    );
                })}
            </ul>
        </section>
    )
}