Category: React

Sometimes, we want to set the iframe content of a React component.

In this article, we’ll look at how to set the iframe content of a React component.

How to set the iframe content of a React component?

To set the iframe content of a React component, we use the createPortal function.

For instance, we write

import React, { useState } from "react";
import { createPortal } from "react-dom";

export const IFrame = ({ children, ...props }) => {
  const [contentRef, setContentRef] = useState(null);
  const mountNode = contentRef?.contentWindow?.document?.body;

  return (
    <iframe {...props} ref={setContentRef}>
      {mountNode && createPortal(children, mountNode)}
    </iframe>
  );
};

to assign the setContentRef ref to the iframe.

Then we call createPortal with children and the iframe’s body element with contentRef?.contentWindow?.document?.body to populate it.

Conclusion

To set the iframe content of a React component, we use the createPortal function.

Sometimes, we want to render multiple React components in the React render() function.

In this article, we’ll look at how to render multiple React components in the React render() function.

How to render multiple React components in the React.render() function?

To render multiple React components in the React render() function, we wrap them with a fragment.

For instance, we write

<React.Fragment>
  <h1>Page title</h1>
  <ContentComponent />
  {this.props.showFooter && <footer>(c) abc</footer>}
</React.Fragment>

to wrap our h1, ContentComponent and the footer with the React.Fragment fragment.

Then they’ll be rendered without any wrapping element.

Conclusion

To render multiple React components in the React render() function, we wrap them with a fragment.

Sometimes, we want to iterate over object with Object.entries with React.js.

In this article, we’ll look at how to iterate over object with Object.entries with React.js.

How to iterate over object with Object.entries with React.js?

To iterate over object with Object.entries with React.js, we call Object.entries and map.

For instance, we write

const a = {
  a: 1,
  b: 2,
  c: 3,
};

Object.entries(a).map(([key, value]) => {
  // ...
});

in our component to call Object.entries with a to return an array with an array of key-value pairs in object a.

Then we get the key and value from the map callback parameter and render the property key and value.

Conclusion

To iterate over object with Object.entries with React.js, we call Object.entries and map.

Sometimes, we want to set inline style of background color with React.

In this article, we’ll look at how to set inline style of background color with React.

How to set inline style of background color with React?

To set inline style of background color with React, we set the backgroundColor style.

For instance, we write

<a style={{ backgroundColor: "yellow" }}>yellow</a>

to set the backgroundColor of the link to 'yellow' inline with the style prop.

Conclusion

To set inline style of background color with React, we set the backgroundColor style.