0

Estoy usando react-slick y quiero tener dos configuraciones diferentes para mobile y desktop. Actualmente tengo un objeto con la configuracion:

const sliderSettings = {
  adaptiveHeight: true,
  centerMode: true,
  ....
}

Y cuando llamo al slider hago

<Slider {...sliderSettings}/>

Ahora yo quiero tener un objeto diferente para mobile, ya tengo una variable isMobile disponible, y quiero hacer algo como

<Slider {isMobile ? {...sliderSettingsMobile} : {...sliderSettings}}/>

Probe de esta forma y algunas similares pero me arroja un error "..." expected

Alguien sabe cual es la forma correcta de enviar el objeto props condicionalmente?

1
  • crea una variable sliderSettingsProps cuyo valor cambia condicionalmente en el padre y al hijo pasale como prop sliderSettingsProps
    – Ivandez
    el 18 ago. 2022 a las 14:49

1 respuesta 1

2

Has probado de esta manera?

const isMobile = true;
const desktopSettings = { centerMode: false };
const mobileSettings = { centerMode: true };
const settings = isMobile ? mobileSettings : desktopSettings;

<Slider {...settings} />

También lo puedes hacer así:

const isMobile = true;
const desktopSettings = { centerMode: false };
const mobileSettings = { centerMode: true };

<Slider {...(isMobile ? mobileSettings : desktopSettings)} />
1
  • Es la respuesta que buscaba, lamentablemente no me sirvio, al parecer el componente react-slick no acepta cambiar de props asi a la ligera, tengo que generar un componente u otro depende de la situacion. De todas maneras, la segunda solucion responde a mi pregunta. Aceptada.
    – Agustin G.
    el 19 ago. 2022 a las 14:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.