0
166
Visualizações.map() no está mapeando (generando <div> con .map())
Lo que estaba tratando de hacer...
Código...
const programmingSkillsDetails = [ { skill: "JavaScript", ratingPercentage: 85 }, { skill: "React JS", ratingPercentage: 85 }, { skill: "React Native", ratingPercentage: 85 }, ... ]; ... <div className="resume-screen-container programming-skills-container" key="programming-skills" > {programmingSkillsDetails.map((skill, index) => { <div className="skill-parent" key={index}> <div className="heading-bullet"></div> <span>{skill.skill}</span> <div className="skill-percentage"> <div style={{ width: skill.ratingPercentage + "%" }} className="active-percentage-bar" ></div> </div> </div>; })} </div>Producción...
Representa el "contenedor de pantalla" principal <div> ... pero no asigna los <div> secundarios
Reconoce el skill.skill y skill.ratingPercentage
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Esto se debe a que su función de mapa no devuelve nada.
La función de mapa toma una función de devolución de llamada como parámetro, y esta devolución de llamada debe devolver algo si desea mostrar algo en el DOM. Aquí hay más información: https://linguinecode.com/post/how-to-use-map-react
Haz esto en su lugar:
{programmingSkillsDetails.map((skill, index) => <div className="skill-parent" key={index}> <div className="heading-bullet"></div> <span>{skill.skill}</span> <div className="skill-percentage"> <div style={{ width: skill.ratingPercentage + "%" }} className="active-percentage-bar" ></div> </div> </div> )}O también podrías escribirlo así:
{programmingSkillsDetails.map((skill, index) => { return <div className="skill-parent" key={index}> <div className="heading-bullet"></div> <span>{skill.skill}</span> <div className="skill-percentage"> <div style={{ width: skill.ratingPercentage + "%" }} className="active-percentage-bar" ></div> </div> </div>} )}O así:
{programmingSkillsDetails.map((skill, index) => { return (<div className="skill-parent" key={index}> <div className="heading-bullet"></div> <span>{skill.skill}</span> <div className="skill-percentage"> <div style={{ width: skill.ratingPercentage + "%" }} className="active-percentage-bar" ></div> </div> </div>)} )}
·
Juan Pablo Isaza
Relatório
Responde à pergunta