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 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 copy to the clipboard on button click with JavaScript, we use the Clipboard API.
For instance, wwe write
document.querySelector(".copy-text").addEventListener("click", async () => {
await navigator.clipboard.writeText(textToCopy);
window.alert("Success! The text was copied to your clipboard");
});
to call navigator.clipboard.writeText with the textToCopy to copy the string to the clipboard.
We call addEventListener to add the function with the code as the click listener for the element with class copy-text.
To programmatically navigate using React Router and JavaScript, we can use the useHistory hook.
For instance, we write
import { useHistory } from "react-router-dom";
const HomeButton = () => {
const history = useHistory();
const handleClick = () => {
history.push("/home");
};
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
};
to call the useHistory hook to return the history object.
Then we define the handleClick function that calls history.push to navigate to the /home page.
And then we set the onClick prop toi handleClick to call handleClick when we click oin the button.
To add loop with React JSX, we use the array map method.
For instance, we write
<div>
{[...Array(10)].map((x, i) => (
<ObjectRow key={i} />
))}
</div>
to render the array’s data by creating array with 10 entries with Array(10).
Then we call map with a callback that returns the ObjectRow component to render its contents.
We set the key prop to i to set a unique key for each item.