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;
<select>
, pero puede ayudarte en lo que necesitas. Saludos