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.

Answer 1

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`}/>