how to change a list according to screen size(less than 500px)

Question

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>
    )

You could use CSS for this: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile — madzong, May 09 '22 at 16:59
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, May 09 '22 at 20:50

score 0 · Accepted Answer · answered May 09 '22 at 17:03

0

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>
    )

answered May 09 '22 at 17:03

Dean Van Greunen

5,060
2
14
28

let me know if this works, if it does then please dont forget to mark this as the answer – Dean Van Greunen May 09 '22 at 17:04
1

Thanks a lot for your help and I am sorry if it took me this long to respond. I talked to my supervisor and it turns out that he did not want to hide anything, including the education. I left it as is but your effort were gladly appreciated, Thank you. – Marvin Rivera May 29 '22 at 23:54

how to change a list according to screen size(less than 500px)

1 Answers1