Tengo el siguiente componente tomando los data de utilería.

 <Button data={booleanValue && { d: 4, // another 8 key/values }} />

Entonces, el valor de los datos solo se pasa si booleanValue es verdadero.

Pero también tengo otros 3 valores más que deseo agregar dentro de estos datos que deben mostrarse siempre. Entonces muestre independientemente de si booleanValue es verdadero o falso.

¿Hay alguna manera de que pueda escribir esto con elegancia dentro del componente que se encuentra encima de sí mismo?

Podría crear el objeto por separado como el siguiente que funcionaría. Pero tratando de ver si podía lograrlo sin la creación de objetos adicionales.

Una posible solución pero no quiere crear un objeto como este.

 let obj = { a: 1, b: 2, c: 3, }; if (booleanValue) { obj['d'] = 4; // more values being added same way. } <Button data={obj} />

Intenté lo siguiente pero no captura las claves a,b,c.

 <Button data={{ a: 1, b: 2, c: 3, } && booleanValue && { d: 4, // more values being added same way. }} />

Posibles soluciones mencionadas aquí. En JavaScript, ¿cómo agregar condicionalmente un miembro a un objeto?

Pero no puedo distribuir según las respuestas considerando que estoy agregando los valores a, b, c en el componente mismo.
Y otras respuestas aquí implican agregar un objeto primero.