How get JSON from file and render it to component in reactjs

Question

Hi i was making file to config full site from json file . and i want to fetch the json file and render to website so i made file called text.js to fetch and render json

text.js

import React from 'react' ;

 class text extends React.Component {
     constructor(props){
        super(props)
        this.state = {
          datat: [],
        };
      }
      componentDidMount(){
         fetch('/config.json')
          .then(response => response.json())
          .then((datao) =>{        
            this.setState({
                datat: (JSON.parse(JSON.stringify(datao)))
            })

          });
       }
      render(){
         const datatorender = this.state.datat
      return (datatorender);
        }}

  export default text;

and i have this config file stored in public

config.json

{
  "SITENAME": "site name",
  "SITE_DESCRIPTION":"desc",
  "META_OG_IMAGE":"",
  "META_APPLE_STATUS_BAR_COLOR":"#fff",
  "META_OG_TITLE":"hello world",
  "META_THEME_COLOR":"#66a6ff",
  "HOME": "Home",
  "CONTACT": "Contact",
  "EMAIL_TAG": "mailto:email@gmail.com",
  "PRIVACY": "Privacy Policy & Cookies",
  "CAPTION_UNDER_SITENAME": "say hello world withme",
  "USERNAME_PLACEHOLDER": "username",
  "GET_STORIES_BUTTON_TEXT": "Get",
  "SHOW_GOOGLE_TRANSLATER_BUTTON": "yes",
  "ADSENSE_AD_CLIENT": "ca-pub-98765432",
  "GOOGLE_ANALYTICS_TRACKING_ID": "UA-98765432-4",
  "FACEBOOK_APP_ID": "98765432345678",
  "ADS_UNDER_USERNAME_FILED": "<Image style=\"width:100%\" src=\"https://via.placeholder.com/728x90/e2e2e2/fff?text=Under%20input%20ads%20leaderboard%20%3C3\"  />",
  "ADS_UNDER_EACH_STORY": "<Image src=\"https://via.placeholder.com/336x280/e2e2e2/fff?text=Unde%20story%20box%20ads%20%3C3\" fluid />",
  "COPYRIGHT": "Copyright ©2019",
  "ALLRIGHT_RESEVER": "All rights reserved.",
  "SHOW_MADEWITH_IN_FOTTER":"yes",
  "MADEWITH": "Made with ❤ by @44cck",
  "MADEWITH_URL":"https://instagram.com/44cck",
  "SHOW_HOW_TO_USE_IN_HOME": "yes",
  "CUSTIMIZED_HOW_TO_USE": "no",
  "CUSTIMIZED_HOW_TO_USE_HTML": "<h1>custom how to use html</h1>",
  "DOWNLOAD": "Download",
  "COPIED": "✔😍 Copied !",
  "COPY": "Copy" 
}

Error im getting :

Objects are not valid as a React child (found: object with keys {SITENAME, SITE_DESCRIPTION, META_OG_IMAGE, META_APPLE_STATUS_BAR_COLOR, META_OG_TITLE, META_THEME_COLOR, HOME, CONTACT, EMAIL_TAG, PRIVACY, CAPTION_UNDER_SITENAME, USERNAME_PLACEHOLDER, GET_STORIES_BUTTON_TEXT, SHOW_GOOGLE_TRANSLATER_BUTTON, ADSENSE_AD_CLIENT, GOOGLE_ANALYTICS_TRACKING_ID, FACEBOOK_APP_ID, ADS_UNDER_USERNAME_FILED, ADS_UNDER_EACH_STORY, COPYRIGHT, ALLRIGHT_RESEVER, SHOW_MADEWITH_IN_FOTTER, MADEWITH, MADEWITH_URL, SHOW_HOW_TO_USE_IN_HOME, CUSTIMIZED_HOW_TO_USE, CUSTIMIZED_HOW_TO_USE_HTML, DOWNLOAD, COPIED, COPY}). If you meant to render a collection of children, use an array instead.

And i want to call the config value like this in : home.js

<h1>{Text.SITENAME}</h1>

Answer 1

That's because you're just trying to directly render the object, you can't render objects you have to render values/elements. Try something like this:

render(){
    const data = this.state.datat
    return ( Object.keys(data).map(key => <p>{key}:{data[key]}</p>) );
}

that way you're looping through all the object's keys/properties and rendering them individually