0
167
Viewshow to change a list according to screen size(less than 500px)
my user is showing 4 educational titles. I want it to only show 1 on mobile screen(less than 500px); How can I Accomplish this in react? below is the code and how it looks on a normal wide screen resolution and how Id like it to look
return (
<div className="educations-section">
{user.educations.map(
(educationRecord) => (
<div key={educationRecord._id}>{educationRecord.degree}</div>
)
)}
</div>
)
·
Juan Pablo Isaza
1 answers
Answer question0
use some conditioned rendering
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>
)
·
Juan Pablo Isaza
Report
Answer question