Estoy tratando de representar un componente que devuelve la descripción de un elemento de una API. En este caso, devuelvo hechizos de la API DnD e intento acceder a la URL de cada uno para mostrar sus descripciones. Hasta ahora, los puntos finales de los menús desplegables funcionan correctamente. Estoy tratando de formatear lo que se devuelve en otro punto final para usarlo con mi componente de descripción. Tengo un estado llamado "hechizo seleccionado" que rastrea lo que se usa en el menú desplegable. ahora mismo solo obtengo un objeto que no sé cómo convertir en la cadena que quiero. Espero tener sentido con lo que quiero hacer 😓

aquí está lo que tengo trabajando.

 import {useState , useEffect} from 'react' import axios from 'axios'; export default function Description (props){ const { selectedSpell } = props console.log(props) const [description, setDescription] = useState([]); const fetchDesc = async () => { try { const DESC_URL = "{https://www.dnd5eapi.co/{props.selectedSpell}"; const response = await axios.get(DESC_URL); console.log("response", response.data.results); setDescription(response.data.results); console.log(description) } catch (error) { console.log(error); } }; useEffect(() => { fetchDesc(); }, []); return( <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Consectetur nunc, morbi enim, rhoncus lacus duis. Tortor amet pulvinar dolor fringilla sit elit ac ut. </p> </div> ) }

Soy nuevo aquí y no puedo publicar imágenes todavía jajaja

https://i.stack.imgur.com/iqi9Y.png

Estoy tratando de hacer que ese módulo de descripción devuelva una llamada API basada en el "hechizo" elegido