xxxxxxxxxx
<div style={{'backgroundColor': status === 'approved' ? 'blue' : status === 'pending' ? 'black' : 'red'}}>
</div>
xxxxxxxxxx
render () {
return (
<div className="row">
{ //Check if message failed
(this.state.message === 'failed')
? <div> Something went wrong </div>
: <div> Everything in the world is fine </div>
}
</div>
);
}
xxxxxxxxxx
render () {
return (
<div className="row">
{ //Check if message failed
(this.state.message === 'failed')
? <div> Something went wrong </div>
: <div> Everything in the world is fine </div>
}
</div>
);
}
xxxxxxxxxx
<div>
{van ? (
<div >
"Yoo What's Up"
</div>
) : <h2>Loading</h2>}
</div>
xxxxxxxxxx
import React from 'react';
const App = () => {
const users = [
{ name: 'Robin' },
{ name: 'Markus' },
];
const showUsers = false;
return (
<div>
{showUsers ? (
<ul>
{users.map(user => (
<li>{user.name}</li>
))}
</ul>
) : null}
</div>
);
};
export default App;
xxxxxxxxxx
const matches = useMediaQuery('(max-width:600px)');
return (
<>
<Box className='innerSection'>
{matches ?
// Some Code
:
// Some Code
</Box>
}
</>
Ternary operator in react for Responsive Using MUI
xxxxxxxxxx
String year = credits < 30 ? "freshman" : credits <= 59 ? "sophomore" : credits <= 89 ? "junior" : "senior";