Getting [object Object] mapping through my array

Question

Im trying to spit out Data from a Wordpress CMS in my nextJS app. This is an. ACF Repeater field. I get the data just fine via the editor but trying to use map to push it to the page i just get [object object] back.

Below is the code in question -- AM I just misunderstanding how Map is suppose to work?

 <div className="steve"
  // eslint-disable-next-line react/no-danger
  dangerouslySetInnerHTML={{
   __html: node.GlobalFAQ.faq.map((data) => (
            <div>
              {data.question}
              {data.answer}
            </div>
          )),
        }}
      />

Here is what is returned to me

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

This code works fine, this isnt calling a repeater just a field from an ACF group.

      <div className={blogStyles.blocksContainer}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: node.AboutBlocks.blockThree }}
     />

Then Below is my query

    query AllPosts {
  posts(where: {id: 25}) {
    edges {
      node {
        id
        date
        title
        slug
        Header {
          headerImage {
            mediaItemUrl
          }
          headerText
        }
        AboutBlocks {
          blockOne
          blockThree
          blockTwo
        }
        SalesBlock {
          salesBlockOne
          salesBlockThree
          salesBlockTwo
        }
        title
        GlobalFAQ {
          faq {
            question
            answer
          }
        }
      }
    }
  }
}

Here is what I get when I console out node.GlobalFAQ.faq

Array(6)

0: {question: "How do I pay for my order?", answer: "

We’ll include an order summary link with …ike you would at any other e-commerce store.

↵"} 1: {question: "How do I know I'll get my wheels?", answer: "

Want to do your research before sending over mo…#8217;s nice to know that it’s there).

↵"} 2: {question: "What if I found a lower price than you quoted?", answer: "

Wow. You must have found a really good deal. Se… we’ll try, every once in a while we can’t.)

↵"} 3: {question: "Are you selling second run or blemished wheels?", answer: "

No. Unless specifically listed as a blemished w…ew, first run, and manufactured warrantied.

↵"} 4: {question: "Do you sell tires too?", answer: "

Yes. We have access to discounted pricing on a …els. Let us know what you’d like HERE.

↵"} 5: {question: "How can you sell wheels for cheaper than other places?", answer: "

There are two main reasons we can sell for so c…rice can then be passed on to our customers.

↵"} length: 6 proto: Array(0)

Do you have the `node.GlobalFAQ.faq` response array? Can you share that please? — Drew Reese, Oct 29 '20 at 04:28
Please provide the response. Maybe data.question / data.answer could be an object. — Danielprabhakaran N, Oct 29 '20 at 04:32
I will confess that I have never used some of these technologies. That is why I am not answering straight out. I am pretty familiar with view binding. Have you tried adding any of the following to your references: ```.value``` , ```.toString()``` , or ```.valueOf()``` ? For example, the first would change your code to ```{data.question.value}``` I am pretty sure that this only works on HTML text elements. The next two are methods of EVERY object, so I am pretty sure they'll work. — Nate T, Oct 29 '20 at 05:00
I added what I get to my via console.log {console.log(node.GlobalFAQ.faq)} — lolitsme, Oct 29 '20 at 05:28

score 0 · Answer 1 · answered Oct 29 '20 at 05:43

Well I found my answer and I can't believe I spent over two hours fighting with it >.<

It was setting 'dangerouslySetInnerHTML'

This code below works as expected.

        <div>
        {node.GlobalFAQ.faq.map((item) => (
          <div>
            <p>{item.question}</p>
            <p>{item.answer}</p>
          </div>
        ))}
      </div>

Getting [object Object] mapping through my array

1 Answers1