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>