React.js render different header bars

Question

I have a React component issue.

In a React app, I would like to display a different header bar for mobile devices and another header for laptop or desktop. I'm using material-ui headers. I have created two separate header components so how do I configure them in the App.jsx main to display one header for mobile device and another header when the user is on a laptop?

const headerLaptop =() ={
return (
<div>header element</div>
);
};

const headerMobile =() ={
return (
<div>header element</div>
);
};

const App =() ={
return (
<div>headerMobile or headerLaptop</div>
);
};

Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Nov 20 '18 at 08:36
You can adapt this https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser — Keilath, Nov 20 '18 at 09:40

score 0 · Answer 1 · answered Nov 20 '18 at 11:22

0

Ot you are using material-ui, you can use withWidth see doc and example here

answered Nov 20 '18 at 11:22

Sylvain Biehler

1,403
11
25

React.js render different header bars

1 Answers1