Conditional rendering exercise

App.jsx

/*
The Budget component uses "conditional rendering" to do
different things based on its props. What will each line
in the App component render?
*/

const App = () => (
	<main>
		<Budget value={5500} />
		<Budget value={240} />
		<Budget value={0} />
		<Budget value={-150} />
		<Budget value={120} />
	</main>
)

// Assume that there are CSS classes named "low" and "high" defined in App.css.
const Budget = (props) => {
    let css = '', display = props.value
    if( props.value < 0 ) {
        css = 'low'
    }
    else if( props.value >= 1000 ) {
        css = 'high'
    }
	else if( props.value === 0 ) {
		display = 'Empty!'
	}

    return (
        <span className={css}> {display} </span>
    )
}