ReactJS access variable out of scope in render function

Question

I have a config file that I would like to import and render/loop through in one of my components. The config file:

data.config.js

export const data = {

  clientData: {
    name:'Lynda', 
    age:'53', 
    userid:7896
  },
  otherData: [
    {
      option1: 'good;', 
      option2: {type: 'confirmed'}, 
      option3: ['u','g','l','y']
    },
    {
      option1: 'awesome;', 
      option2: {type: 'temporary'}, 
      option3: ['u','g']
    },
  ],
};

component.js file

import { data } from '../config/client/data.config.js';
..

var clientData = data.clientData; // console o/p returns object key and values
var otherData = data.otherData; // console o/p returns object key and values

.. 

render() {
  const {
      title,
      favicon,
      socialMediaDesc,
      socialMediaImg,
      ...
    } = this.props;

...
  return(
    <html className="no-js" lang="en">
      <title>{title}</title> // works as expectec 
      ...

      <script dangerouslySetInnerHTML={{ // eslint-disable-line react/no-danger
        __html: `

        for (var client in ${clientData}) {
          if (${clientData}.hasOwnProperty(client)) {
            (function(key, value) {
              console.log(key, " : ", value);
            })(client, ${clientData}[client]);
          }
        };
      `,
      }}
    </html>
  )

}

Expected console o/p:

name  :  Lynda
age  :  53
userid  :  7896

Result that I am getting: Uncaught SyntaxError: Unexpected identifier as value of ${clientData} is [object Object]

How can I access clientData and otherData key and values inside the render function?

import { data} from '../config/client/data.config.js'; what does a console.log() in the constructor say? — Nocebo
– Nocebo, Commented Aug 28, 2017 at 19:02
I believe those const are declared in the wrong line. The should be before the return. you can try to create the string thats gonna go in dangerouslySetInnerHTML prop before the render again and use that string as a single variable. — bennygenel
– bennygenel, Commented Aug 28, 2017 at 19:05
@user988544 it might seem like its working now but render function should return a string or a react component. you are returning multiple things. I'm just pointing out a possible future problem since you can see I did not add it as an answer. Another thing is that I suggest you to use window.jQuery object componentDidMount rather than adding the javascript code as a HTML string since its not a good way to implement — bennygenel
– bennygenel, Commented Aug 28, 2017 at 19:11
@user988544 There's no way that const in the middle of the return is working correctly. That is 100% invalid syntax. You should verify that you've saved and compiled your code because I promise you that doesn't work. — Mike Cluck
– Mike Cluck, Commented Aug 28, 2017 at 19:14

Mike Cluck · Accepted Answer · 2017-08-28 19:05:04Z

1

You seem to be misunderstanding how template strings work. They immediately create a string where each ${thing} is replaced by the string value of that thing.

Check out what happens when I do something similar and just print the string.

const clientData = {
  name: 'Lynda',
  age: '53',
  userid: 7896
};

const html = `
for (var client in ${clientData}) {
  if (${clientData}.hasOwnProperty(client)) {
    (function(key, value) {
      console.log(key, " : ", value);
    })(client, ${clientData}[client]);
  }
}`;

console.log(html);

You see how that works? Since clientData is an object, it's generating [object Object] as part of the string.

If you really want to dangerously generate some JS (which I would thoroughly advise against), then consider generating the code before then inject it as HTML.

const clientData = {
  name: 'Lynda',
  age: '53',
  userid: 7896
};

let html = '';
for (var client in clientData) {
  if (clientData.hasOwnProperty(client)) {
    html += `
(function(key, value) {
  console.log(key, " : ", value);
})(${client}, "${clientData[client]}");`;
  }
}

console.log(html);

I'd like to point out that unless you're doing something really tricky then there's no reason to wrap that code in a <script> tag. Just run it as is. After all, you're already in the middle of running some JS. May as well run the rest right away.

const clientData = {
  name: 'Lynda',
  age: '53',
  userid: 7896
};

for (var client in clientData) {
  if (clientData.hasOwnProperty(client)) {
    (function(key, value) {
      console.log(key, " : ", value);
    })(client, clientData[client]);
  }
}

answered Aug 28, 2017 at 19:05

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

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

1 Comment

user988544 Over a year ago

Thank you for walking me through this. This helps a lot. Reason why I was initially trying to access them as part of script tags is because based on the values, I set GTM (google tag manager) properties and datalayer values at run time, this is why I am trying to understand if I can access these values as part of dangerouslySetInnerHTML, since its in that script tag I load and declare google tag analytics, setting them outside wont help

Collectives™ on Stack Overflow

ReactJS access variable out of scope in render function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related