Category: React

Sometimes, we want to import image (.svg, .png) in a React component.

In this article, we’ll look at how to import image (.svg, .png) in a React component.

How to import image (.svg, .png) in a React component?

To import image (.svg, .png) in a React component, we can import the image directly.

For instance, we write

import React from "react";
import image from "./img1.png";
import "./helloWorld.scss";

const HelloWorld = () => (
  <>
    <img src={image} alt="some image" />
  </>
);
export default HelloWorld;

to add the img element into the HelloWorld component.

We set its src prop to the image that we import with the import statement.

We can import it with import since the Webpack file loader plugin is included with Create React app projects.

Conclusion

To import image (.svg, .png) in a React component, we can import the image directly.

Sometimes, we want to return multiple lines JSX in another return statement in React.

In this article, we’ll look at how to return multiple lines JSX in another return statement in React.

How to return multiple lines JSX in another return statement in React?

To return multiple lines JSX in another return statement in React, we can wrap our components with fragments.

For instance, we write

const Comp = () => {
  return [1, 2, 3].map((n, index) => {
    return (
      <React.Fragment key={index}>
        <h3>Item {n}</h3>
        <p>Description {n}</p>
      </React.Fragment>
    );
  });
};

to wrap the h3 and p elements in the React.Fragement component in the map callback.

Then these elements will be rendered without a wrapper element around them.

Conclusion

To return multiple lines JSX in another return statement in React, we can wrap our components with fragments.

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.