¿Cómo puedo cambiar un valor booleano después de renderizar condicionalmente algo en reaccionar?
Quiero hacer un renderizado condicional en React y luego cambiar el valor de un booleano usado en la condición, pero no tengo idea de cómo hacerlo. Es algo simple que es útil, así que sospecho que es posible de alguna manera, pero no tengo idea sobre la sintaxis/método correcto y mis resultados de búsqueda en Google están llenos de cosas irrelevantes.
let hasBeenPrinted = false return( {deals.map((deal) => ( deal.value>10000 && !hasBeenPrinted && <h4>Congratulations on your first big deal</h4> <Deal deal={deal} /> ) )Entonces, lo que quiero hacer aquí es cambiar el valor de hasBeenPrinted a verdadero para que el texto de felicitación solo se imprima una vez.
Puedes usar deals.map((deal, index)=>{ ... }) y verificar si el índice es 0 para imprimir felicitaciones solo la primera vez. Los cambios reflejados en su código serían como tales.
return( {deals.map((deal,index) => ( deal.value>10000 && index == 0 && <h4>Congratulations on your first big deal</h4> <Deal deal={deal} /> ) )Si lo entiendo correctamente, deals son una matriz que puede tener múltiples "grandes ofertas" ( deal.value > 10000 ). Sin embargo, ¿desea asegurarse de que "felicidades..." se imprima como máximo 1 vez incluso si hay, digamos, 7 tratos importantes en los deals ?
Si eso es correcto, parece que sería mejor filtrar deals así
const hasBigDeal = deals.some( deal => deal.value > 1e4) y luego representar condicionalmente el <h4 /> basado en hasBigDeal . No creo que actualizar el estado de reacción o una variable local como hasBeenPrinted sea apropiado aquí, ya que la información que le interesa ya existe antes de la declaración de procesamiento ( return ).
Su código final se vería así:
const hasBigDeal = deals.some(deal => deal.value > 1e4); return( <> {hasBigDeal && <h4>Congratulations on your first big deal</h4>} {deals.map((deal) => <Deal deal={deal} />)} </> Y en caso de que aún no lo sepa, hay toneladas de métodos súper útiles expuestos en el objeto Array en javascript que pueden hacer su vida mucho más fácil. En mi ejemplo anterior, utilicé Array.some (enlace a documentos de MDN aquí )
Además, el <>...</> se llama React Fragment, que también es muy útil si tampoco ha oído hablar de ellos (enlace a documentos )