Tengo un componente JSX de reacción que realiza una llamada API al backend y obtiene los datos que necesito. Estos datos se encuentran actualmente dentro de una etiqueta de selección de reacción que me permite mostrar todas las opciones dentro de un menú desplegable. Ahora estoy tratando de usar este menú desplegable para representar la selección usando gráficos, específicamente react-chartjs-2. Lo he estado intentando durante bastante tiempo, pero honestamente estoy al borde de mi juicio.

Así es como se ve la llamada a la API con la selección:

 export default class ------ extends component{ constructor(props, context) { super(props, context); this.state = { selectedOption: {}, }; } fetchData = (inputValue, callback) => { setTimeout(() => { fetch( "api" + inputValue, { method: "GET", } ) .then((resp) => { return resp.json(); }) .then((data) => { const tempArray = []; if (data) { if (data.length) { data.forEach((element) => { tempArray.push({ label: `${element.campo}`, value: element.valor, }); }); } else { tempArray.push({ label: `${data.campo}`, value: data.valor, }); } } callback(tempArray); }) .catch((error) => { console.log(error, "error"); }); }, 1000); }; onSearchChange = (selectedOption) => { if (selectedOption) { this.setState({ selectedOption, }); } };

Aquí está el elemento de selección real y el gráfico dentro de la sección de retorno

 render(){ return( <AsyncSelect id="valx" value={this.state.selectedOption} loadOptions={this.fetchData} placeholder="placehold" onChange={(e) => { this.onSearchChange(e); }} defaultOptions={true} /> <div class="charts"> <Bar id="MyBarChart" data={{}} options={{}} /> <Pie id="MyPieChart" data={{}} options={{}} /> </div>

Tengo un largo camino por recorrer en lo que respecta a React, estoy seguro de que la solución resultará ser bastante simple. Cualquier y toda ayuda es bienvenida, y gracias de antemano.