How can I declare a variable inside brackets?

You can try something like this as well:

• You can create a function that deals with this UI representation.
• In this function, you can call buildStuff and have it return 3 <p> tags.
• Then in main render, you can check your condition and render accordingly. This will make your render clean and declarative.

getBuildJSX() { const stuff = this.buildStuff(); return Array.from({ length: 3}, () => <p> { stuff }</p>); } render() { const statement = true return ( <div> { statement ? this.getBuilsJSX() : null } </div> ); } 

Try it online

First solution (edit: alternative)

render() { const statement = true; const stuff = this.buildStuff(statement, 3); // jsx result looped in divs return ( <div> { statement && <div> { stuff } </div> } </div> ); } 

Alternative, memoization (caching of functions) if this is your goal:

const memoize = require('fast-memoize'); const memoized = memoize(this.buildStuff); ... render() { const statement = true; return ( <div> { statement && <div> <p> {memoized()} </p> <p> {memoized()} </p> <p> {memoized()} </p> </div> } </div> ); } 

The true power of memoization however is, if you cache based on the parameter you give to buildStuff (maybe you move statement into buildstuff?). In your case I would just clean up the component and parameters in favour of readability rather than optimising something. So last alternative:

// Stuff is a component now const Stuff = ({statement, stuff}) => { if(!statement) return null; const result = stuff(); return ( <div> <p> {result} </p> <p> {result} </p> <p> {result} </p> </div> ) } render() { return ( <div> <Stuff statement={true} stuff={this.buildStuff} /> </div> ); } 

The benefit, you can now choose to pass the result or the function itself through props, and in the downward component either call the function or simply have its results passed through.

Single answer to your question in the headline: you cant, JSX is not a templating engine like Razor.

Explanation:

// JSX <div id="foo">Hello world</div> // Translates into React.createElement("div", {id: "foo"}, "Hello world"); // JSX <div>{ statement && <div /> }</div> // Translates to React.createElement("div", null, statement && React.createElement("div")); 

Either you declare a new variable with an attribute, or you simply cant, since javascript does not allow variable creation inside parameters of functions.

I think one of the main ideas of react is to use components to structure your code.

So one way to do it would be like this:

render() { const statement = true; const Stuff = ({statement}) => { if (!statement) { return null; } return this.buildStuff(); } return ( <div> <p> <Stuff statement={statement} /> </p> <p> <Stuff statement={statement} /> </p> <p> <Stuff statement={statement} /> </p> </div> ); } 

Updated StackBlitz.

This answer is an answer to the problem but not a solution to the question. If you cannot declare a variable inside brackets in react (as you could do in Razor for example). Calling twice a statement can still be your best bet.

render() { const statement = true const stuff = statement ? this.buildStuff() : null return ( <div> { statement && <div> <p> {stuff} </p> <p> {stuff} </p> <p> {stuff} </p> </div> } </div> ); } 

At least, we call this.buildStuff() only if needed and if we do, we call it only once.