Después de obtener la API, que es https://api.hatchways.io/assessment/students , sigue algunos pasos para crear una página de sitio web coincidente. Estoy atascado en un paso en el que tenemos que agregar un campo de entrada de texto para agregar etiquetas para un estudiante específico. aquí está el video que muestra qué hacer.
Consulte el enlace a continuación que muestra el archivo pdf que muestra la evaluación completa que se debe realizar.
<html> <head> <title>Tags</title> <style> #tags_here{padding: 5px; font-size: 16px; border: 0; outline: none; font-family: 'Rubik'; color: #333; flex: 1; } input { outline: 0; border-width: 0 0 2px; border-color: blue } input:focus { border-color: green } .tag_text { margin: 5px; padding: 5px 6px; border: 1px solid #ccc; border-radius: 3px; background: #eee; color: #333; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff; cursor: default; } .del{ font-size:25px; font-weight:bold; } </style> </head> <body> Input tags here: <br/> <input type="text" id="tags" placeholder="Add a tag" onkeydown="search()"> <div id="tags_here"></div> <script> var text = document.getElementById("tags"); function search () { if(event.keyCode == 13) { var x = Object.assign(document.createElement('SPAN'), { className: 'tag_text' }); var el = Object.assign(document.createElement('SPAN'), { className: 'del' }, {textContent: '×'}); console.log(el) x.innerHTML = text.value + ' ' + ' '; document.getElementById('tags_here').appendChild(x); x.appendChild(el); document.getElementById("tags").value =""; check(); } } function check () { var remove = document.querySelectorAll(".del"); for (var i = 0; i < remove.length; i++) { remove[i].addEventListener("click", function () { //Add function here this.parentNode.remove(); }); } } </script> </body> </html>No puedo hacer exactamente lo que vi en ese video, pero puedo darte el código para crear etiquetas que también hice recientemente, aunque también soy principiante, lo probé, puedes verlo aquí https://codepen.io/gauntletww/pen /JjpPgLV y no puedo fragmentar el código ya que actualmente estoy en Android, cualquier comentario para mí también sería apreciado.
en App.js, el componente Student tendrá addTag prop como se muestra a continuación
<Student key={student.id} data={student} addTag={(e) => addTag(e, student)} /> const addTag = (e, student) => { const { tags } = student; if(e.key === "Enter" && e.target.value) { if(student.tags.indexOf(e.target.value) != -1) { tags.push(e.target.value); e.target.value = ""; setStudents([...students, student]); } } }; los datos actualizados de los estudiantes harán que se vuelva a representar un componente de Student que mostrará las nuevas etiquetas que se agregan en student.tag
en Student.jsx, map a través de etiquetas y mostrarlo en el componente Student