Object are not valid as a React child in React

Question

I have read a few anwsers on SO but none seem to come across what I need.

I have a function:

const geoDataRTB = () => {
  return data.map((result) => result.request.buyerContext.request.geoData);
};

Which returns a json object.

"geoData": {
                        "type": "GPS",
                        "areaCode": "586",
                        "city": "MACOMB",
                        "country": "USA",
                        "metro": "505",
                        "latitude": "42.311859",
                        "longitude": "-85.579595",
                        "state": "MI",
                        "postalCode": "48042",
                        "bandwidth": "MOBILE",
                        "sic": "517312",
                        "domain": "MYVZW.COM",
                        "cityCode": 0
                    },

For example...currently I am returning geoData.city but id rather return the whole geoDta object instead. The end result is displayed via this

<section id='returnedData' className='mt-5 pb-5'>
        <h2 className={h2Styles}>result</h2>
        <div className='bg-gray-700 text-white rounded-md p-5 mt-5 '>
          {data.map((result, i) => (
            <div className='py-1'>
              <span className='text-xs text-gray-400 font-mono'>Capture {i} : </span>
              <span className='font-mono'>{result}</span>
              <br />
            </div>
          ))}
        </div>
      </section>

But when trying to return the geoData i get the object child error. Any suggestions on how to display the object? I have tried

const geoDataRTB = () => {
  return data.map((result) => result.request.buyerContext.request.geoData.toString());
};

But this just returns [Object, Object]

If you want to display result as font-mono's content, you may change your code to: <span className='font-mono'>{JSON.stringify(result)}</span> — Mehdi Dehghani
– Mehdi Dehghani, Commented Jul 2, 2021 at 13:10

alexfertel · Accepted Answer · 2021-07-02 13:23:51Z

1

If you want to display JSON as-is, usually you write something like:

<pre>
     {JSON.stringify(OBJECT, null, 2)}
</pre>

That will show a javascript object pretty printed.

answered Jul 2, 2021 at 13:23

alexfertel

9461 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sunyatasattva · Accepted Answer · 2021-07-02 13:11:21Z

1

It looks to me like you want to display your data inside your monospace section, and not that you want to pass the data around for further manipulation or styling it in a different way.

If that's the case, you'll need to do:

const geoDataRTB = () => {
  return data.map(result => JSON.stringify(result.request.buyerContext.request.geoData));
};

answered Jul 2, 2021 at 13:11

Sunyatasattva

5,8903 gold badges30 silver badges41 bronze badges

2 Comments

mrpbennett Over a year ago

Nice!! this works...but how could i format this so it looks like JSON? Can i manlipuate the string to look like JSON?

user14550434 Over a year ago

use a <pre> tag

Collectives™ on Stack Overflow

Object are not valid as a React child in React

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related