mi usuario muestra 4 títulos educativos. Quiero que solo muestre 1 en la pantalla del móvil (menos de 500 px); ¿Cómo puedo lograr esto en reaccionar? a continuación se muestra el código y cómo se ve en una resolución de pantalla ancha normal y cómo me gustaría que se vea
return ( <div className="educations-section"> {user.educations.map( (educationRecord) => ( <div key={educationRecord._id}>{educationRecord.degree}</div> ) )} </div> )usar algún renderizado condicionado
let show1 = window.innerWidth <= 500; return ( <div className="educations-section"> { Show1 && <div key={user.educations[0]._id}>{user.educations[0].degree}</div>} { !Show1 && user.educations.map( (educationRecord) => ( <div key={educationRecord._id}>{educationRecord.degree}</div> ) )} </div> )