Tengo un componente principal ( App ) que usa dos componentes secundarios Chart y Artists .

El componente Artists es un menú desplegable creado con la biblioteca semantic-ui-react .

Lo que estoy tratando de hacer es convertir el menú desplegable en su propio componente ( Artists ) que, cuando se cambia, cambiará el estado del artist en el componente principal ( App ) y luego ese estado del artist en la App se puede pasar como artist prop al componente Chart

Todo funciona hasta ahora, es solo que el menú desplegable se ve extraño (las opciones están fuera del cuadro desplegable: imagen a continuación). No estoy seguro de si estoy configurando esto de la manera correcta.

Componente de la aplicación:

 import './App.css'; import Chart from './Chart.js'; import {useState} from 'react'; import Artists from './Artists.js'; const artistOptions = [ { text: 'Bruno Mars', value: 'Bruno Mars' }, { text: 'Billie Eilish', value: 'Billie Eilish' } ... ] export default function App() { const [artist, setArtist] = useState('Bruno Mars'); const handleArtistChange = (artist) => { setArtist(artist); } return ( <div className="App"> <h2>Awards for {artist}</h2> <Artists options={artistOptions} onArtistChange={handleArtistChange}/> <Chart data={data} height={150} width={960} show={"Grammys"} artist={artist} /> </div> ); }

Componente de artistas:

 import React from 'react'; import {Dropdown} from 'semantic-ui-react' export default function Artists (props) { const handleOnChange = (e, data) => { props.onArtistChange(data.value); } return( <Dropdown placeholder='placeholder' search selection options={props.options} onChange={handleOnChange} /> ) }