Skip to main content
se añadió 1 carácter en el cuerpo
Origen Enlace
Jaime
  • 7.3k
  • 2
  • 11
  • 23
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: "4"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>
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: "4"
        };
        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>
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>
Origen Enlace
Jaime
  • 7.3k
  • 2
  • 11
  • 23

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: "4"
        };
        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>