0

agradeceria mucho que alguien pudiera ayudarme con esta duda que tengo en React js. Tengo un select con datos que vienen de una API (nombres), pero necesito que al hacer clic en alguna de las opciones me pinte en un label el rol de la persona que se selecciono, el cual esta tambien dentro de la API. Por el momento este es el codigo que tengo:

import React, { Component } from "react";
import axios from 'axios';
class FormData extends Component {
    state = {
        Pathfindees: []
    }
    componentDidMount() {
        this.getPathfindees();
    }
    getPathfindees = () => {
        axios.get("http://192.168.100.6:8080/v1/employees/769aef4f-b4b3-46bd-9ffc-adffff7fe54e/pathfindees")
            .then(res => {
                this.setState({
                    Pathfindees: res.data.data,
                });
                console.log(this.state);
            });
    }
    render() {
        return (
            <form className="Main-Wrapper">
                <div id="PathFinder-box">
                    <label>Path Finder:</label>
                    <label id="PathFinderName"><i>Path finder Name</i></label>
                </div>
                <div id="PathFindes-box">
                    <label>Path Findees:
                <select className="ComboBox">
                            {/*Listado de PathFindees*/}
                            {this.state.Pathfindees.map((PathFindee) => {
                                return (
                                    <option key={PathFindee.employeeid} value={PathFindee.rol}>{PathFindee.name}</option>
                                )
                            })
                            }
                        </select>
                    </label>
                    <div id="Role_Date-box">
                        <label>Role:</label>
                        <label id="DateEvaluation_Title">Date of Evaluation:</label>
                    </div>
                </div>
            </form>
        );
    }
}
export default FormData;
2
  • Hola Ariana, bienvenida a S.O.es. Si pudieses editar tu pregunta y pegar el código en vez de un pantallazo, sería ideal, ya que puede ser analizado de mejor forma, aparte que está en muy baja resolución tu imagen. Relacionado con tu pregunta, no se si has revisado la documentación de React relacionada con <select>, pero puede ayudarte en lo que necesitas. Saludos Commented el 20 ago. 2020 a las 23:11
  • Hola Alter Lagos, gracias por tu respuesta , por supuesto que lei la documentacion de react relacionada al Select pero me siento un poco perdida al combinar esto con datos que vienen de una API. Edite la preguntada con el codigo directamente en vez del pantallazo como lo pediste. Gracias! Commented el 21 ago. 2020 a las 0:23

1 respuesta 1

0

Lo que se me ocurre que puedes hacer es crear un variable donde guardes el valor actual seleccionado, ¿Cómo hacer esto?, recuerda que el input select tiene un método llamado onChange, cuando se ejecute el onChange extrae el valor que por lo que veo en tu código es el rol que necesitas, aquí abajo edite un poco tu código. Revísalo y dime si tienes alguna duda

import React, { Component } from "react";
import axios from 'axios';
class FormData extends Component {
    state = {
        Pathfindees: [],
        PathfindeeRole: ''
    }
    componentDidMount() {
        this.getPathfindees();
    }
    getPathfindees = () => {
        axios.get("http://192.168.100.6:8080/v1/employees/769aef4f-b4b3-46bd-9ffc-adffff7fe54e/pathfindees")
            .then(res => {
                this.setState({
                    Pathfindees: res.data.data,
                });
                console.log(this.state);
            });
    }
    handleChange = (e) => {
        this.setState({
            PathfindeeRole: e.target.value
        })
    }
    render() {
        return (
            <form className="Main-Wrapper">
                <div id="PathFinder-box">
                    <label>Path Finder:</label>
                    <label id="PathFinderName"><i>Path finder Name</i></label>
                </div>
                <div id="PathFindes-box">
                    <label>Path Findees:
                <select className="ComboBox" onChange={this.handleChange}>
                            {/*Listado de PathFindees*/}
                            {this.state.Pathfindees.map((PathFindee) => {
                                return (
                                    <option key={PathFindee.employeeid} value={PathFindee.rol}>{PathFindee.name}</option>
                                )
                            })
                            }
                        </select>
                    </label>
                    <div id="Role_Date-box">
                        <label>{this.state.PathfindeeRole}</label>
                        <label id="DateEvaluation_Title">Date of Evaluation:</label>
                    </div>
                </div>
            </form>
        );
    }
}
export default FormData;
3
  • Ese mismo valor del estado debería pasarlo al select como atributo "value", algo como <select value={this.state.PathfindeeRole}> Commented el 21 ago. 2020 a las 1:09
  • Victor Bravo, muchisimas gracias por tu respuesta, me ha servido de maravilla el codigo!!!! Muchas gracias por tomarte el tiempo de ayudarme. Saludos y bendiciones! Commented el 21 ago. 2020 a las 20:58
  • Por nada, solo quedaría marcar la respuesta como correcta, saludos! Commented el 21 ago. 2020 a las 21:41

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.