Los valores booleanos se pueden pasar implícitamente al componente como @Ajay también señaló en los comentarios, como

 <div x />

que es básicamente equivalente a

 <div x={true} />

Sin embargo, si su variable no es booleana, entonces debe escribirla como

 <div x={x} />

O si tiene varios accesorios de este tipo, puede formar un objeto como

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

y pasarlos usando atributos de propagación como

 <Comp {...cmpProps} />

Tuve una ligera epifanía al leer estas respuestas. Dado que en ES6+ puede agregar una variable existente a un objeto como este:

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

Eso significa que puede agregar un accesorio con nombre a un componente de React como:

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

No se puede, una propiedad sin valor asignado ( <div x /> ) es un acortador de ( <div x={true} /> ) (como señaló Ajay Varghese);

Pasar el mismo nombre de variable sería <div x={x} />

Si necesita pasar varios valores directamente en accesorios JSX, puede usar los atributos de extensión JSX .

 const divProps = { x: 1, y: 2 }; ... <div {...divProps} />

A menudo se usa para pasar todos los accesorios de padres a hijos.

También puede anular un accesorio asignándolo después de la propagación:

 <div {...divProps} x=3 />