How to write JavaScript code inside html attributes in React JS

Question

return(
  <div>
    <Loading loadingMessage="Running "{this.state.programName}" program"/>
  </div>
);

I know that above attribute loadingMessage value is syntactically wrong. But my need is, I need to get that programName from state and append to loadingMessage attribute value. How can I do this? Any help will be appreciated.

Guilherme Samuel · Accepted Answer · 2021-01-22 09:30:47Z

5

You can write javascript inside the curly brackets, just concatenate the string in there.

return (
    <div>
        <Loading
            loadingMessage={"Running " + this.state.programName + " program"}
        />
    </div>
);

or use a template literal:

<Loading loadingMessage={`Running ${this.state.programName} program`}/>

edited Jan 22, 2021 at 9:30

Guilherme Samuel

5476 silver badges13 bronze badges

answered Apr 18, 2016 at 23:25

user1641172

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

Collectives™ on Stack Overflow

How to write JavaScript code inside html attributes in React JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related