React's props with the same name as their value

Question

Can we pass props to a component that has the same name and value implicitly?

Example: Let\'s say that I have a variable called x: const x = 1

Answer 1

You can't, a prop with no assigned value (<div x />) is a shortener for (<div x={true} />) (as Ajay Varghese pointed out);

Passing the same variable name would be <div x={x} />

If you need to pass multiple values directly in JSX props you can use the JSX Spread Attributes.

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

It is often used to pass all props from parent to children.

You can also override a prop by assigning it after the spread :

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

Answer 2

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

Answer 3

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, than 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} />

Answer 4

I also had the ViggoV's approach.
To clarify destructuring within react props and knowing props are objects literal:

let text = "Aloha";

console.log( text );        //"Aloha"

// ❌ wrong one
console.log({ text })       /* { a : "Aloha" } indeed, this transforms variable
                               text into object but at reception of  
                               a component this one would result as "{}"  
                               as here we only pass the props' name -->  
                               returning indeed a value hence implicitly
                               == true */


// ✅ good one
console.log({ ...{ text }}) /* { a : "Aloha" } also transforms variable text  
                               into an object but this trick ( for 
                               component ) actually returns the  
                               - the props' name: "text"
                               - the props' value : which is now an 
                               object { text : 'Hello' }
                             */
   

➡️Example: showing the effects of destructured props passed