To add multiple classes to a ReactJS Component, we can set the className propt to a string with the classes separated by spaces.
For instance, we write
<li className={[activeClass, data.klass, "main-class"].join(" ")}>...</li>;
to join the activeClass, data.klass and 'main-class strings together with join.
Then all the classes are applied to the li element.
To hide the scroll bar if not needed with CSS, we set the overflow-y property.
For instance, we write
div {
overflow-y: auto;
}
to only show the vertical scrollbar only when needed with overflow-y: auto;.
To turn off word wrapping in CSS, we set thr white-space property.
For instance, we write
div {
white-space: pre-wrap;
}
to add the white-space: pre-wrap; style to turn off word wrapping in the div.
To make a div into a link with JavaScript, we can make it navigate to a URL on click.
For instance, we write
<div
onclick="location.href='http://www.example.com';"
style="cursor: pointer"
></div>
to make the div navigate to http://www.example.com on click by setting location.href to 'http://www.example.com' in the onclick attribute.
And we set the cursor style to pointer to change the cursor to a pointer when we move our mouse over the div.
To vertically align text inside a flexbox with CSS, we set the align-items property.
For instance, we write
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-items: center;
background: silver;
width: 100%;
height: 20%;
}
to add align-items: center; to vertically center align the content in the li element.
We make li elements flex containers with display: flex;.