How to put variables inside quotations in react












0















I have the following piece of code,



row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},


I wish to put the state variable (this.state.index) inside the braces, however when i try to concatenate with "+"



 row: {
'&:nth-of-type(' + this.state.index + ')': {
backgroundColor: theme.palette.secondary.dark,

},


I get a type error saying "Expected 1 argument, but got 2", are there any ideas how i could fix or remedy this?



The block of code is using the material UI library (Customized tables), I am pretty sure it's just my syntax that is wrong, and I'm not quite sure why



Reference: https://material-ui.com/demos/tables/



const styles = (theme: Theme) =>
createStyles({
root: {
height: 500,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},
},
});









share|improve this question

























  • This isn't enough. Is there a way you can make a small repo? Or at least edit your question with which libraries are you using?

    – Baruch
    Nov 23 '18 at 0:42











  • developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – Truong Dang
    Nov 23 '18 at 0:56











  • I have tried the expression interpolation and get the same problem :/

    – Richard Ng
    Nov 23 '18 at 1:28











  • Have you tried using square brackets? var rowStyle = "&:nth-of-type(' + this.state.index + ')', then row: { [rowStyle]: { backgroundColor: "#FFFFFF" } }

    – Kevin Bai
    Nov 23 '18 at 2:25













  • I am unable to create the var inside the function scope, so i made the rowStyle a state instead with rowStyle:'&:nth-of-type(' + this.state.index + ') however, when i use it : [this.state.rowStyle] i get a type error 'this' implicitly has type 'any' because it has a type annotation

    – Richard Ng
    Nov 23 '18 at 2:40
















0















I have the following piece of code,



row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},


I wish to put the state variable (this.state.index) inside the braces, however when i try to concatenate with "+"



 row: {
'&:nth-of-type(' + this.state.index + ')': {
backgroundColor: theme.palette.secondary.dark,

},


I get a type error saying "Expected 1 argument, but got 2", are there any ideas how i could fix or remedy this?



The block of code is using the material UI library (Customized tables), I am pretty sure it's just my syntax that is wrong, and I'm not quite sure why



Reference: https://material-ui.com/demos/tables/



const styles = (theme: Theme) =>
createStyles({
root: {
height: 500,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},
},
});









share|improve this question

























  • This isn't enough. Is there a way you can make a small repo? Or at least edit your question with which libraries are you using?

    – Baruch
    Nov 23 '18 at 0:42











  • developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – Truong Dang
    Nov 23 '18 at 0:56











  • I have tried the expression interpolation and get the same problem :/

    – Richard Ng
    Nov 23 '18 at 1:28











  • Have you tried using square brackets? var rowStyle = "&:nth-of-type(' + this.state.index + ')', then row: { [rowStyle]: { backgroundColor: "#FFFFFF" } }

    – Kevin Bai
    Nov 23 '18 at 2:25













  • I am unable to create the var inside the function scope, so i made the rowStyle a state instead with rowStyle:'&:nth-of-type(' + this.state.index + ') however, when i use it : [this.state.rowStyle] i get a type error 'this' implicitly has type 'any' because it has a type annotation

    – Richard Ng
    Nov 23 '18 at 2:40














0












0








0








I have the following piece of code,



row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},


I wish to put the state variable (this.state.index) inside the braces, however when i try to concatenate with "+"



 row: {
'&:nth-of-type(' + this.state.index + ')': {
backgroundColor: theme.palette.secondary.dark,

},


I get a type error saying "Expected 1 argument, but got 2", are there any ideas how i could fix or remedy this?



The block of code is using the material UI library (Customized tables), I am pretty sure it's just my syntax that is wrong, and I'm not quite sure why



Reference: https://material-ui.com/demos/tables/



const styles = (theme: Theme) =>
createStyles({
root: {
height: 500,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},
},
});









share|improve this question
















I have the following piece of code,



row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},


I wish to put the state variable (this.state.index) inside the braces, however when i try to concatenate with "+"



 row: {
'&:nth-of-type(' + this.state.index + ')': {
backgroundColor: theme.palette.secondary.dark,

},


I get a type error saying "Expected 1 argument, but got 2", are there any ideas how i could fix or remedy this?



The block of code is using the material UI library (Customized tables), I am pretty sure it's just my syntax that is wrong, and I'm not quite sure why



Reference: https://material-ui.com/demos/tables/



const styles = (theme: Theme) =>
createStyles({
root: {
height: 500,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
},
row: {
'&:nth-of-type()': {
backgroundColor: theme.palette.secondary.dark,

},
},
});






reactjs typescript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 23 '18 at 10:50









Gihan Saranga Siriwardhana

604424




604424










asked Nov 23 '18 at 0:27









Richard NgRichard Ng

11




11













  • This isn't enough. Is there a way you can make a small repo? Or at least edit your question with which libraries are you using?

    – Baruch
    Nov 23 '18 at 0:42











  • developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – Truong Dang
    Nov 23 '18 at 0:56











  • I have tried the expression interpolation and get the same problem :/

    – Richard Ng
    Nov 23 '18 at 1:28











  • Have you tried using square brackets? var rowStyle = "&:nth-of-type(' + this.state.index + ')', then row: { [rowStyle]: { backgroundColor: "#FFFFFF" } }

    – Kevin Bai
    Nov 23 '18 at 2:25













  • I am unable to create the var inside the function scope, so i made the rowStyle a state instead with rowStyle:'&:nth-of-type(' + this.state.index + ') however, when i use it : [this.state.rowStyle] i get a type error 'this' implicitly has type 'any' because it has a type annotation

    – Richard Ng
    Nov 23 '18 at 2:40



















  • This isn't enough. Is there a way you can make a small repo? Or at least edit your question with which libraries are you using?

    – Baruch
    Nov 23 '18 at 0:42











  • developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

    – Truong Dang
    Nov 23 '18 at 0:56











  • I have tried the expression interpolation and get the same problem :/

    – Richard Ng
    Nov 23 '18 at 1:28











  • Have you tried using square brackets? var rowStyle = "&:nth-of-type(' + this.state.index + ')', then row: { [rowStyle]: { backgroundColor: "#FFFFFF" } }

    – Kevin Bai
    Nov 23 '18 at 2:25













  • I am unable to create the var inside the function scope, so i made the rowStyle a state instead with rowStyle:'&:nth-of-type(' + this.state.index + ') however, when i use it : [this.state.rowStyle] i get a type error 'this' implicitly has type 'any' because it has a type annotation

    – Richard Ng
    Nov 23 '18 at 2:40

















This isn't enough. Is there a way you can make a small repo? Or at least edit your question with which libraries are you using?

– Baruch
Nov 23 '18 at 0:42





This isn't enough. Is there a way you can make a small repo? Or at least edit your question with which libraries are you using?

– Baruch
Nov 23 '18 at 0:42













developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

– Truong Dang
Nov 23 '18 at 0:56





developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

– Truong Dang
Nov 23 '18 at 0:56













I have tried the expression interpolation and get the same problem :/

– Richard Ng
Nov 23 '18 at 1:28





I have tried the expression interpolation and get the same problem :/

– Richard Ng
Nov 23 '18 at 1:28













Have you tried using square brackets? var rowStyle = "&:nth-of-type(' + this.state.index + ')', then row: { [rowStyle]: { backgroundColor: "#FFFFFF" } }

– Kevin Bai
Nov 23 '18 at 2:25







Have you tried using square brackets? var rowStyle = "&:nth-of-type(' + this.state.index + ')', then row: { [rowStyle]: { backgroundColor: "#FFFFFF" } }

– Kevin Bai
Nov 23 '18 at 2:25















I am unable to create the var inside the function scope, so i made the rowStyle a state instead with rowStyle:'&:nth-of-type(' + this.state.index + ') however, when i use it : [this.state.rowStyle] i get a type error 'this' implicitly has type 'any' because it has a type annotation

– Richard Ng
Nov 23 '18 at 2:40





I am unable to create the var inside the function scope, so i made the rowStyle a state instead with rowStyle:'&:nth-of-type(' + this.state.index + ') however, when i use it : [this.state.rowStyle] i get a type error 'this' implicitly has type 'any' because it has a type annotation

– Richard Ng
Nov 23 '18 at 2:40












1 Answer
1






active

oldest

votes


















0














const styleObj = {
root: {
height: 500,
width: "100%",
marginTop: theme.spacing.unit * 3,
overflowX: "auto"
},
table: {
minWidth: 700
},
row: {}
};

styleObj.row['&:nth-of-type(' + this.state.index + ')'] = {
backgroundColor: theme.palette.secondary.dark
};

const styles = (theme: Theme) => createStyles(styleObj);





share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439376%2fhow-to-put-variables-inside-quotations-in-react%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    const styleObj = {
    root: {
    height: 500,
    width: "100%",
    marginTop: theme.spacing.unit * 3,
    overflowX: "auto"
    },
    table: {
    minWidth: 700
    },
    row: {}
    };

    styleObj.row['&:nth-of-type(' + this.state.index + ')'] = {
    backgroundColor: theme.palette.secondary.dark
    };

    const styles = (theme: Theme) => createStyles(styleObj);





    share|improve this answer




























      0














      const styleObj = {
      root: {
      height: 500,
      width: "100%",
      marginTop: theme.spacing.unit * 3,
      overflowX: "auto"
      },
      table: {
      minWidth: 700
      },
      row: {}
      };

      styleObj.row['&:nth-of-type(' + this.state.index + ')'] = {
      backgroundColor: theme.palette.secondary.dark
      };

      const styles = (theme: Theme) => createStyles(styleObj);





      share|improve this answer


























        0












        0








        0







        const styleObj = {
        root: {
        height: 500,
        width: "100%",
        marginTop: theme.spacing.unit * 3,
        overflowX: "auto"
        },
        table: {
        minWidth: 700
        },
        row: {}
        };

        styleObj.row['&:nth-of-type(' + this.state.index + ')'] = {
        backgroundColor: theme.palette.secondary.dark
        };

        const styles = (theme: Theme) => createStyles(styleObj);





        share|improve this answer













        const styleObj = {
        root: {
        height: 500,
        width: "100%",
        marginTop: theme.spacing.unit * 3,
        overflowX: "auto"
        },
        table: {
        minWidth: 700
        },
        row: {}
        };

        styleObj.row['&:nth-of-type(' + this.state.index + ')'] = {
        backgroundColor: theme.palette.secondary.dark
        };

        const styles = (theme: Theme) => createStyles(styleObj);






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 23 '18 at 10:16









        Boris TraljićBoris Traljić

        524311




        524311






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439376%2fhow-to-put-variables-inside-quotations-in-react%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            404 Error Contact Form 7 ajax form submitting

            How to know if a Active Directory user can login interactively

            TypeError: fit_transform() missing 1 required positional argument: 'X'