Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to define more than one style name using CSS modules with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to define more than one style name using CSS modules with React.

In this article, we’ll look at how to define more than one style name using CSS modules with React.

How to define more than one style name using CSS modules with React?

To define more than one style name using CSS modules with React, we can put them class names in one string.

For instance, we write

function Footer(props) {
  return (
    <div className={styles.footer}>
      <div className={`${styles.description} ${styles.yellow}`}>
        <p>this site was created by me</p>
      </div>
    </div>
  );
}

to set the className prop of the inner prop to

`${styles.description} ${styles.yellow}`

to apply multiple classes imported from the CSS module.

Conclusion

To define more than one style name using CSS modules with React, we can put them class names in one string.

Categories
JavaScript Answers

How to upload multiple files using form data with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to upload multiple files using form data with JavaScript.

In this article, we’ll look at how to upload multiple files using form data with JavaScript.

How to upload multiple files using form data with JavaScript?

To upload multiple files using form data with JavaScript, we can call the append with the same key for multiple files.

For instance, we write

const { files } = document.getElementById("fileupload");
const formData = new FormData();
for (const image of files) {
  formData.append("files", image);
}

to select the file input with getElementById.

Then we get the selected files with files.

Next, we create the FormData object.

Then we loop through the files with a for-of loop and call formData.append with the 'files' key and add each image to it.

Conclusion

To upload multiple files using form data with JavaScript, we can call the append with the same key for multiple files.

Categories
React Native Answers

How to require image module using dynamic names with React Native?

Labrador retriever puppy walking on green grass

Sometimes, we want to require image module using dynamic names with React Native.

In this article, we’ll look at how to require image module using dynamic names with React Native.

How to require image module using dynamic names with React Native?

To require image module using dynamic names with React Native, we can call require with a string based on another value.

For instance, we write

const icon = props.active
  ? require("image!my-icon-active")
  : require("image!my-icon-inactive");
<Image source={icon} />;

to call require with different image names based on the value of props.active.

And then we set the source prop to icon in the Image component.

Conclusion

To require image module using dynamic names with React Native, we can call require with a string based on another value.

Categories
JavaScript Answers

How to fix webpack –watch isn’t compiling changed files with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix webpack –watch isn’t compiling changed files with JavaScript.

In this article, we’ll look at how to fix webpack –watch isn’t compiling changed files with JavaScript.

How to fix webpack –watch isn’t compiling changed files with JavaScript?

To fix webpack –watch isn’t compiling changed files with JavaScript, we can increase the number of watchers and ignore files that don’t have to be watched.

We run

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

to increase the number of watchers to 524288.

Also, in our Webpack config, we write

//...

module.exports = {
  //...
  watchOptions: {
    poll: true,
    ignored: /node_modules/,
  },
  //...
};

to ignore the /node_modules/ folder in the watch options so that Webpack doesn’t watch anything in the folder for changes.

Conclusion

To fix webpack –watch isn’t compiling changed files with JavaScript, we can increase the number of watchers and ignore files that don’t have to be watched.

Categories
React Answers

How to redirect page on click of a button with React Router v6?

Labrador retriever puppy walking on green grass

Sometimes, we want to redirect page on click of a button with React Router v6.

In this article, we’ll look at how to redirect page on click of a button with React Router v6.

How to redirect page on click of a button with React Router v6?

To redirect page on click of a button with React Router v6, we use the useNavigate hook.

For instance, we write

import React from "react";
import { useNavigate } from "react-router-dom";

function LoginLayout() {
  let navigate = useNavigate();
  const routeChange = () => {
    let path = `newPath`;
    navigate(path);
  };

  return (
    <div className="app flex-row align-items-center">
      <Container>
        <Button color="primary" className="px-4" onClick={routeChange}>
          Login
        </Button>
      </Container>
    </div>
  );
}

to call the useNavigate hook to return the navigate function.

Then we call navigate with path to navigate to the path in the routeChange function.

Then we assign routeChange as the value of the onClick prop of the Button to navigate to the path on click.

Conclusion

To redirect page on click of a button with React Router v6, we use the useNavigate hook.