In our previous tutorial, we saw how using JSX to write our component structure results in cleaner, shorter, and easier to understand code than using vanilla JavaScript.
So far, we’ve only created our components using JSX where we didn’t have to rely on logic or conditionals to determine component structure. For example, the Country component simply returns text directly based on props values that we have passed on to them.
Usually you will have to do at least a small processing of the entrance props data when building React components in real life. In this tutorial, our goal will be to learn how to do it correctly by separating JavaScript and JSX.
Using JavaScript expressions in JSX
JSX allows you to embed any valid JavaScript expression as long as it is enclosed in curly brackets. We used this function earlier to access values from props object.
<div className="container">
<h2 className="country-name">Country Name: {props.name}</h2>
<p className="capital">Capital: {props.capital}</p>
<p className="population">Population: {props.population}</p>
</div>
Expressions in JavaScript are pieces of code that ultimately resolve to a value. In the example above, props.name resolved to the name of the country. We could add the toUpperCase() method to capitalize the country name and it would work anyway. You can perform these simple operations in curly brackets.
Using conditionals within JSX
We can use the && to render an element conditionally in JSX based on the Boolean value of an expression. Here’s how it works. Let’s say you write true && expression with curly brackets in JSX, this will fix expression. On the other hand, false && expression will always solve false and nothing will be returned.
We can rewrite ours Country component to use conditionals to produce some Boolean-based statements.
function Country(props) {
return (
<div className="container">
<h2 className="country-name">Country Name: {props.name}</h2>
<p className="population">Population: {props.population}</p>
<p className="area">
Area: {props.area} km<sup>2</sup>
</p>
<p className="positive">
{props.democracy && `${props.name} is a Democracy.`}
</p>
<p className="negative">
{props.population / props.area > 200 &&
`${props.name} is densly populated.`}
</p>
<p>
{props.continent == "Asia"
? `${props.name} is in Asia.`
: `${props.name} is not in Asia.`}
</p>
</div>
);
}
let countryElement = (
<>
<Country
name="India"
population={1389637446}
area={3287263}
democracy
continent="Asia"
/>
<Country
name="United States"
population={332800000}
area={9833520}
democracy
continent="North America"
/>
</>
);
let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);
We pass a democracy prop to both ns Country components. Its default has become true since we have not assigned it any value. Consequentially, props.democracy will come back true. Basically it means the following line
{props.democracy && `${props.name} is a Democracy.`}
actually becomes
{true && `${props.name} is a Democracy.`}
In the next line, we do something a little more complicated and check if the population per unit area is greater than 200. If it exceeds 200, we make a declaration on population density.
You can use the ternary operator in curly brackets when you want to render something regardless of the passed value that evaluates positive or negative. This is what we did with the continent prop. Test your conditional inside JSX in a similar way.
Separate JavaScript and JSX
The great thing about JSX is that it is easy to read and allows us to easily build complex component structures. However, introducing more and more logic using curly brackets is counterproductive. The goal is to keep JSX as declarative as possible and handle the logic separately.
Let’s say we want to list the five largest states of a country within our component. We could pass them along with other values such as a prop. After that, we can go through the list of states and create a bunch of <li> items along the way. We will use the map() method to create our list and would also work inside the curly brackets with JSX, but everything looks cleaner and will be easier to keep in the long run when we keep the logical part separate.
function Country(props) {
let popDensity = props.population/props.area;
let popFeature = popDensity > 200 ? 'sparsely' : 'densly';
let isDemocracy = props.democracy && `${props.name} is a Democracy.`;
let states = props.largestStates.map(state => <li>{state}</li>);
return (
<div className="container">
<h2 className="country-name">Country Name: {props.name}</h2>
<p className="population">Population: {props.population}</p>
<p className="area">Area: {props.area} km<sup>2</sup></p>
<p>{isDemocracy}</p>
<p>It is {popFeature} populated.</p>
<h3>Five Largest States:</h3>
<ol>
{states}
</ol>
</div>
);
}
let countryElement = (
<>
<Country
name="United States"
population={332800000}
area={9833520}
democracy
largestStates={["Alaska", "Texas", "California", "Montana", "New Mexico"]}
/>
</>
);
let rootElement = document.getElementById("root");
ReactDOM.createRoot(rootElement).render(countryElement);
Also remember that you can only use expressions inside the curly brackets, so code with if statements or for the loops will still have to be placed outside of JSX. You can get away with using function expressions called immediately, but keeping the logic separate is good practice and much more productive in the long run.
Final thoughts
React doesn’t aim to separate markup and logic by putting them into separate files. Instead, it relies on components to divide the user interface into multiple entities that can function independently. It is our job to keep our logic separate from the markup within the component. The best way to do this is to set everything up in JavaScript beforehand and use JSX to build our UI based on the final data.
