0

Estoy desarrollando una App en ReactJS, y tengo una página donde deseo mostrar dos select, uno dependiente del otro.

Estoy usando react-select y @material-ui.

En dates

[
  {
    "id": 1,
    "name": "202001"
  },
  {
    "id": 2,
    "name": "202002"
  },
  {
    "id": 3,
    "name": "202003"
  },
  {
    "id": 4,
    "name": "202004"
  },
  {
    "id": 5,
    "name": "202005"
  },
  {
    "id": 6,
    "name": "202006"
  },
  {
    "id": 7,
    "name": "202007"
  }
]

tengo una lista de fechas que son las que están disponibles para seleccionar.

import React, { useState, useEffect } from "react";
import Select from "react-select";
...

const App = () => {

    ...

    const DateA = dates.map((item) => ({
        value: item.id,
        label: item.name,
    }));

    const DateB = dates.map((item) => ({
        value: item.id,
        label: item.name,
    }));

    const [dateA, setDateA] = React.useState(null);
    const [dateB, setDateB] = React.useState(null);

    function handleChangeDateA(value) {
        setDateA(value);
    }

    function handleChangeDateB(value) {
        setDateB(value);
    }

    return (
            <div className="App">
                <div className="col-3">
                    <Select
                        classes={classes}
                        styles={selectStyles}
                        inputId="DateA"
                        TextFieldProps={{
                            label: "DateA",
                            InputLabelProps: {
                            htmlFor: "DateA",
                            shrink: true,
                            },
                            placeholder: "DateA...",
                        }}
                        options={DateA}
                        components={components}
                        value={dateA}
                        onChange={handleChangeDateA}
                    />
                </div>
                <div className="col-3">
                    <Select
                        classes={classes}
                        styles={selectStyles}
                        inputId="DateB"
                        TextFieldProps={{
                            label: "DateB",
                            InputLabelProps: {
                                htmlFor: "DateB",
                                shrink: true,
                            },
                            placeholder: "DateB...",
                        }}
                        options={DateB}
                        components={components}
                        value={dateB}
                        onChange={handleChangeDateB}
                    />
                </div>
            </div>
    );
};

export default App;

La idea es que el select de DateB tome las fechas mayores a las que se selecciona en el select de DateA.

Cómo puedo hacer esto, sugerencias?

2
  • Se tiene un array de fechas date, con este array se llena el select de Date A, luego el usuario selecciona por ejemplo una fecha de Junio 2020, entonces se vacían las las fechas a partir de Junio 2020 en el select A , con esas fechas se llena el Date B (select B) y en el select A solo quedan las fechas debajo de junio 2020, ¿Puedes elaborar mas la pregunta?, si puedes agregar un extracto de los datos que hay en dates para ver en que formato vienen, eso sería de utilidad para poder apoyarte, saludos
    – g.4
    el 29 ene. 2021 a las 21:28
  • @g.4 claro, la idea es hacer algo así a lo que estás describiendo: se tiene un array de fechas date, con este array se llena el select de Date A, luego el usuario selecciona por ejemplo una fecha de Junio 2020, entonces se guardan las fechas a partir de Junio 2020 para llenar el select de Date B. Lo que se busca es registrar esas dos fechas, pero que la segunda esté condicionada a la primera, que solo tome fechas mayores. Dale, actualizo la pregunta para mostrarte el array date. Muchas Gracias!
    – bonnegnu
    el 1 feb. 2021 a las 3:00

1 respuesta 1

0

Se puede hacer esto:

useEffect(() => {
        if (condition) {
         setDateB(value)
    }
          
   }, [DateA])

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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