0

tengo un problema que al cambiar el valor de un select en react, luego de guardarse en el state el nuevo valor este ultimo no me cambia en el selector. Antes en option ocupaba un evento on click para seleccionar el objeto que me retornaba en el map, pero el select con el onClick no funcionaba con chrome y se dejo con un onChange y un value en el option que toma el objeto

renderCareerSelector = () => {
    const { careers, selectedCareer } = this.state;
    
    return(
      <div className='create-course-selector-container' dataTapDisabled="true">
        <select className='language-selector' onChange={this.onSelectCareer} value={selectedCareer}>
          {careers.map((career, ix) => {
            if(career.role_id === 3) {
              return(
                <option value={career.id} key={ix}>{career.name}</option>
              )
            }
            return null
          })}
        </select>
      </div>
    )
  }

  onSelectCareer = ({ target: { value } }) => {
    console.log('llega ', value)
    const { careers } = this.state;
    const careerId = value;
    careers.map((career, ix) => {
      if(career.id === careerId) {
        this.setState({
          selectedCareer: career.name,
          selectedCareerId: career.id
        });
      }
    })
  };
4
  • ¿Estás usando react con clases o con hooks? Luce un poco extraño tu código. ¿Esos métodos están dentro de una clase?
    – Jaime
    Commented el 22 abr. 2022 a las 0:31
  • Hola, clases. SelectedCareer es null
    – Richi
    Commented el 22 abr. 2022 a las 0:39
  • Po otro lado ¿El id de la carrera es un número o es un string? Si es un número esta comparación career.id === careerId no va a funcionar, porque target.value es un string.
    – Jaime
    Commented el 22 abr. 2022 a las 0:42
  • Ambos un string
    – Richi
    Commented el 22 abr. 2022 a las 0:43

1 respuesta 1

1

En el select, elimina el fragmento value={selectedCareer} y coloca el option:

...
return(
 <option value={career.id} selected={this.state.selectedCareer===career.id} key={ix}>{career.name}</option>
)
...

Eso debería funcionar. Te adjunto un ejemplo mínimo verificable que reproduje con tu código. Puedes ejecutarlo desde acá para que veas que funciona:

const { Component }  = React;

class App extends Component {

    render() {
        return this.renderCareerSelector();
    }

    constructor(props) {
        super(props);
        this.state = {
            careers: [
                { id: "1", name: "A", role_id: 3 },
                { id: "2", name: "B", role_id: 3 },
                { id: "3", name: "C", role_id: 3 },
                { id: "4", name: "D", role_id: 3 }
            ],
            selectedCareer: null
        };
        this.onSelectCareer = this.onSelectCareer.bind(this);
    }

    renderCareerSelector = () => {
        const { careers, selectedCareer } = this.state;

        return (
            <div className='create-course-selector-container' >
                <select className='language-selector' onChange={this.onSelectCareer}>
                    {careers.map((career, ix) => {
                        if (career.role_id === 3) {
                            return (
                                <option selected={this.state.selectedCareer===career.id} value={career.id} key={ix}>{career.name}</option>
                            )
                        }
                        return null
                    })}
                </select>
            </div>
        )
    }

    onSelectCareer = ({ target: { value } }) => {
        const { careers } = this.state;
        const careerId = value;
        careers.forEach((career, ix) => {
            if (career.id === careerId) {
                this.setState({
                    selectedCareer: career.name,
                    selectedCareerId: career.id
                });
            }
        })
    };
}



ReactDOM.render(<App />, document.getElementById("app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<div id="app"></div>

3
  • Hola gracias por la ayuda, estaba viendo si está solución funciona también en safari
    – Richi
    Commented el 22 abr. 2022 a las 1:42
  • Yo acabo de ejecutarla desde un iphone sin problemas.
    – Jaime
    Commented el 22 abr. 2022 a las 1:44
  • gracias totales
    – Richi
    Commented el 22 abr. 2022 a las 1:53

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.