React's props with the same name as their value

Solution 1:

Booleans can be passed implicitly to the component as @Ajay also pointed out in comments, like

<div x />

which is basically equivalent to

<div x={true} />

However, if your variable is something other than a boolean, then you need to write it like

<div x={x} />

Or if you have a number of such props, you can form an object like

const cmpProps = {
   x,
   y,
   foo,
   bar
}

and pass them using Spread attributes like

<Comp {...cmpProps} />

I had a slight epiphany when reading these answers. Since in ES6+ you can add an existing variable to an object like this:

const x = 42;
const obj = { x, y: 1337 };
console.log(obj); // result { x: 42, y: 1337 }

That means you can add a named prop to a React component like:

const x = 42;
const elm = <MyComponent {...{x}} />;