• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

261
Views
Envío de un objeto prop donde algunos dependen de un valor booleano sin creación de objetos adicionales

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.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

La mejor manera de hacerlo es con accesorios separados.

 <Button a={1} b={2} c={3} d={booleanValue && 4} /> // or <Button data={{a:1,b:2,c:3}} optionalData={booleanValue && {d:4}} />

Pero, si necesita mantener un solo accesorio data .

 <Button data={{ a: 1, b: 2, c: 3, ...booleanValue ? { d: 4 } : undefined, }} />
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error