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? el 22 abr. 2022 a las 0:31
  • Hola, clases. SelectedCareer es null 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. el 22 abr. 2022 a las 0:42
  • Ambos un string 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 el 22 abr. 2022 a las 1:42
  • Yo acabo de ejecutarla desde un iphone sin problemas. el 22 abr. 2022 a las 1:44
  • gracias totales el 22 abr. 2022 a las 1:53

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.