Foros del Web » Programando para Internet » Javascript »

Mostrar contenido uno debajo de otro según el valor seleccionado del Dropdwon

Estas en el tema de Mostrar contenido uno debajo de otro según el valor seleccionado del Dropdwon en el foro de Javascript en Foros del Web. Estimados tengo esta funcionamiento, al seleccionar un item del dropdown y escoger el valor se muestra la información respectiva del item seleccionado, al seleccionar el ...
  #1 (permalink)  
Antiguo 21/09/2020, 17:54
 
Fecha de Ingreso: febrero-2007
Mensajes: 230
Antigüedad: 13 años, 7 meses
Puntos: 1
Mostrar contenido uno debajo de otro según el valor seleccionado del Dropdwon

Estimados tengo esta funcionamiento, al seleccionar un item del dropdown y escoger el valor se muestra la información respectiva del item seleccionado, al seleccionar el siguiente item, se oculta la anterior y se muestra la nueva información. como puedo hacer para que al seleccionar un siguiente item el valor del contenido anterior seleccionado se conserve y no se remplaze por el nuevo seleccionado, es decir que al seccionar un nuevo item se vayan añadiendo uno de bajo del otro, actualmente lo reemplaza. no puedo lograr esa funcionalidad, conservar el contenido seleccionando y que se vayan listando uno debajo del otro y no remplazando. Gracias.

Código Javascript:
Ver original
  1. /* eslint-disable */
  2. import React, { useState, useEffect } from "react";
  3. import Layout from "../../../common/layout";
  4. import DropdownInput from "../../../common/dropdown-input";
  5.  
  6. const ITEMS_BENEFITS_DROP_DOWN = [
  7.   { id: "0000", descripcion: "Condiciones estándares" },
  8.   { id: "0001", descripcion: "Descuento 11x12" },
  9.   { id: "0002", descripcion: "Descuento 13x12" },
  10.   { id: "0003", descripcion: "Migración Pago por Kilómetros" },
  11.   { id: "0004", descripcion: "SOAT gratis" },
  12. ];
  13.  
  14. const BENEFITS_DETAIL = {
  15.   beneficio: "No usa el seguro, lo retomará más adelante",
  16. };
  17.  
  18. const StepThree = ({ setStep }) => {
  19.   const LeftContent = () => (
  20.     <div className="stepTwo leftContent">
  21.       <div className="btn-back" onClick={() => setStep(2)}></div>
  22.       <h2>
  23.         <b>Beneficios</b> a brindar
  24.       </h2>
  25.       <p>Elige el beneficio que deseas brindarle a tu cliente.</p>
  26.       <div className="separator"></div>
  27.       <div className="policieDetail">
  28.         <div className="policieDetail__title">MOTIVO ELEGIDO</div>
  29.         <div className="policieDetail__code">{BENEFITS_DETAIL.beneficio}</div>
  30.       </div>
  31.     </div>
  32.   );
  33.  
  34.  
  35.   const RightContent = () => {
  36.     const [selectedReason, setSelectedReason] = useState('');
  37.     const handleChangeReason = (val) => {
  38.       setSelectedReason(val);
  39.      
  40.     };
  41.  
  42.  
  43.    
  44.  
  45.     return (
  46.       <div className="stepTwo rightContent">
  47.         <div>
  48.           <h2>Elige el beneficio</h2>
  49.           <div className="benefit-reason">
  50.             <p>
  51.               Los beneficios van de acuerdo al <span>motivo elegido.</span>
  52.             </p>
  53.           </div>
  54.         </div>
  55.         <DropdownInput
  56.           items={ITEMS_BENEFITS_DROP_DOWN}
  57.           onDropdownSelectItem={handleChangeReason}
  58.           // loading = {false}
  59.           label="Beneficios a brindar"
  60.           name="beneficios"
  61.         />
  62.  
  63.         {selectedReason && selectedReason.descripcion === "Descuento 11x12" && (
  64.           <div className="benefits-detail">
  65.             <div className="box-benefits-detail">
  66.               <div className="benefits_header">
  67.                 <div className="benefitsLabel">
  68.                   <div className="benefitsLabel blue">beneficio</div>
  69.                 </div>
  70.                 <div className="benefitsRemove">
  71.                   <span className="textRemove">eliminar</span>
  72.                   <button
  73.                     onClick={() => {
  74.                       setSelectedReason();
  75.                     }}
  76.                     className="buttonRemove"
  77.                   ></button>
  78.                 </div>
  79.               </div>
  80.               <div className="benefits_body">
  81.                 <div className="benefits_title">Condiciones estándares</div>
  82.                 <p>
  83.                   A las pólizas financiadas en 12 meses se les modifica a 11 y a
  84.                   la prima anual se le brinda un descuento del 8.3% para no
  85.                   modificar el monto mensual.
  86.                 </p>
  87.                 <div className="benefitsPrima_actual">
  88.                   <div className="benefitsPrima_actual__tilte">
  89.                     Prima total actual:
  90.                   </div>
  91.                   <div className="benefitsPrima_actual__amount">$486</div>
  92.                 </div>
  93.                 <div className="benefitsPrima_total">
  94.                   <div className="benefitsPrima_total__title">
  95.                     Prima total con el beneficio aplicado:
  96.                   </div>
  97.                   <div className="benefitsPrima_total__amount">
  98.                     $286 <span>(-8.3%)</span>
  99.                   </div>
  100.                 </div>
  101.                 <div className="divider"></div>
  102.                 <div className="benefitsList">
  103.                   <ul>
  104.                     <li>
  105.                       Sólo aplica para clientes sin pagos pendientes o que
  106.                       tengan solo 1 cuota pendiente.
  107.                     </li>
  108.                     <li>Refinanciamiento de pago al mes siguiente.</li>
  109.                     <li>Vehículos con máximo 1 siniestro.</li>
  110.                     <li>Es compatible con el Descuento 13x12.</li>
  111.                     <li>No aplica con migraciones.</li>
  112.                     <li>Válido para Lima y provincias.</li>
  113.                   </ul>
  114.                 </div>
  115.               </div>
  116.             </div>
  117.             <div className="benefitsGuion">
  118.               <div className="benefitsGuion_img"></div>
  119.               <div className="benefitsGuion_content">
  120.                 <div className="benefitsGuion_content__title">
  121.                   GUIÓN SUGERIDO
  122.                 </div>
  123.                 <p>
  124.                   "Estimado(a) [nombre del cliente], entiendo las dificultades
  125.                  que podría tener para realizar el pago debido a la coyuntura
  126.                  que estamos viviendo, por...{" "}
  127.                </p>
  128.              </div>
  129.              <div className="BenefitsReadMore">
  130.                <button onClick={() => console.log("carga modal...")}>
  131.                  leer más
  132.                </button>
  133.              </div>
  134.            </div>
  135.          </div>
  136.        )}
  137.  
  138.        {selectedReason && selectedReason.descripcion === "SOAT gratis" && (
  139.          <div className="benefits-detail">
  140.            <div className="box-benefits-detail">
  141.              <div className="benefits_header">
  142.                <div className="benefitsLabel">
  143.                  <div className="benefitsLabel purple">regalo</div>
  144.                </div>
  145.                <div className="benefitsRemove">
  146.                  <span className="textRemove">eliminar</span>
  147.                  <button
  148.                    onClick={() => {
  149.                      setSelectedReason();
  150.                    }}
  151.                    className="buttonRemove"
  152.                  ></button>
  153.                </div>
  154.              </div>
  155.              <div className="benefits_body">
  156.                <div className="benefits_title">SOAT gratis</div>
  157.  
  158.                <div className="benefitsList">
  159.                  <ul>
  160.                    <li>Será entregado en formato digital.</li>
  161.                    <li>Sólo aplica para vehículos particulares de Lima.</li>
  162.                    <li>
  163.                      La entrega también aplica a familiares cercanos como
  164.                      padres, hermanos, hijos y cónyuges.
  165.                    </li>
  166.                    <li>Revisar cartilla de vehículos restringidos</li>
  167.                  </ul>
  168.                </div>
  169.              </div>
  170.            </div>
  171.            <div className="benefitsGuion">
  172.              <div className="benefitsGuion_img"></div>
  173.              <div className="benefitsGuion_content">
  174.                <div className="benefitsGuion_content__title">
  175.                  GUIÓN SUGERIDO
  176.                </div>
  177.                <p>
  178.                  “Estimado(a) [nombre del cliente], le comento que también por
  179.                  seguir siendo parte de la familia Rimac,{" "}
  180.                  <span>le puedo ofrecer el SOAT gratis...</span>
  181.                </p>
  182.              </div>
  183.              <div className="BenefitsReadMore">
  184.                <button onClick={() => console.log("carga modal...")}>
  185.                  leer más
  186.                </button>
  187.              </div>
  188.            </div>
  189.          </div>
  190.        )}
  191.  
  192.        <button
  193.          onClick={() => console.log("faltan mas vistas")}
  194.          className={`btn-brokers ${
  195.            selectedReason ? "" : "disabled"
  196.          } pull-right`}
  197.        >
  198.          CONTINUAR
  199.        </button>
  200.      </div>
  201.    );
  202.  };
  203.  return (
  204.    <Layout leftContent={<LeftContent />} rightContent={<RightContent />} />
  205.  );
  206. };
  207.  
  208. export default StepThree;



La zona horaria es GMT -6. Ahora son las 02:32.