Category: React Answers

Sometimes, we want to concatenate JSX elements into an array.

In this article, we’ll look at how to concatenate JSX elements into an array.

Concatenate JSX Elements into an Array

To concatenate JSX elements into an array, we can call the JavaScript array’s push instance method.

For instance, we write:

import React from "react";

export default function App() {
  const buffer = [];
  buffer.push(<div>A</div>);
  buffer.push(<div>B</div>);
  buffer.push(<div>C</div>);

  return <div>{buffer}</div>;
}

to define the buffer array.

Then we call push with different elements we want to put into it.

And then we render the buffer array’s contents on the screen by putting it in between the braces.

Now we should see:

A
B
C

displayed.

Conclusion

To concatenate JSX elements into an array, we can call the JavaScript array’s push instance method.

Sometimes, we want to open a component in new window on a click in React.

In this article, we’ll look at how to open a component in new window on a click in React.

Open a Component in New Window on a Click in React

To open a component in new window on a click in React, we can call window.open with the element we created.

For instance, we write:

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

const RenderInWindow = (props) => {
  const [container, setContainer] = useState(null);
  const newWindow = useRef(window);

  useEffect(() => {
    const div = document.createElement("div");
    setContainer(div);
  }, []);

  useEffect(() => {
    if (container) {
      newWindow.current = window.open(
        "",
        "",
        "width=600,height=400,left=200,top=200"
      );
      newWindow.current.document.body.appendChild(container);
      const curWindow = newWindow.current;
      return () => curWindow.close();
    }
  }, [container]);

  return container && createPortal(props.children, container);
};

export default function App() {
  const [open, setOpen] = useState();
  return (
    <>
      <button onClick={() => setOpen(true)}>open</button>
      {open && <RenderInWindow>hello world</RenderInWindow>}
    </>
  );
}

to create the RenderInWindow component that opens a new window when it mounts.

To do this, we create the container state with useState.

And we create a ref to store the window object.

In the first useEffect callback, we create a div that we use as the content of the element when RenderInWindow mounts and call setContainer to set the div as the value of `container.

In the 2nd useEffect callback, we check if container is set.

If it is, then we call window.open and set the returned window object as the value of newWindow.current.

And we set the content of the window with:

newWindow.current.document.body.appendChild(container);

And then we get newWindow.current and set it to curWindow.

Finally we return a function that calls curWindow.close to close the window when the component unmounts.

Then we return a portal with the window.

We get the content of the window from the children prop.

In App, we render the RenderInWindow component with the content of the popup window when open is true.

And we make open true when we click on open.

Therefore, we should see ‘hello world’ displayed in a popup window when we click on open.

Conclusion

To open a component in new window on a click in React, we can call window.open with the element we created.

Sometimes, we may run into the "’await’ has no effect on the type of this expression" warning in React.

In this article, we’ll look at how to fix the "’await’ has no effect on the type of this expression" warning in React.

Fix the "’await’ has no effect on the type of this expression" warning in React

To fix the "’await’ has no effect on the type of this expression" warning in React, we should make sure that we only use await on expressions that returns a promise.

For instance, we write:

import React, { useEffect, useState } from "react";

const fetchAnswer = async () => {
  const response = await fetch(`https://yesno.wtf/api`);
  const json = await response.json();
  return json;
};

export default function App() {
  const [ans, setAns] = useState();

  useEffect(() => {
    const getAnswer = async () => {
      const { answer } = await fetchAnswer();
      setAns(answer);
    };
    getAnswer();
  }, []);

  return (
    <>
      <div>{ans}</div>
    </>
  );
}

to clear the warning.

We have fetchAnswer function that makes a GET request with fetch.

Then we return the JSON response from the API by calling response.json and get the resolved value with await.

Then we return the json.

Next, we use the JSON response data in the getAnswer function.

It calls fetchAnswer to return a promise with the JSON response data.

And then we call serAns with the resolved value that we get with await.

Finally, we display the ans value on the screen by returning it.

Conclusion

To fix the "’await’ has no effect on the type of this expression" warning in React, we should make sure that we only use await on expressions that returns a promise.

Sometimes, we want to set text color in React.

In this article, we’ll look at how to set text color in React.

Set Text Color in React

To set text color in React, we can set the style prop to an object with the color property.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <h1 style={{ color: "red" }}>Hello world</h1>
    </>
  );
}

to set the style prop of the h1 element to an object that has the color property set to 'red'.

Now we should see that the color of the text is red.

Conclusion

To set text color in React, we can set the style prop to an object with the color property.

Sometimes, we want to keep the page footer at the bottom of the page with React.

In this article, we’ll look at how to keep the page footer at the bottom of the page with React.

Keep the Page Footer at the Bottom of the Page with React

To keep the page footer at the bottom of the page with React, we can make the set the position of the footer element to fixed.

And we set the position of the footer to be at the bottom of the page.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <>
      <div>
        {Array(200)
          .fill()
          .map((_, i) => (
            <p key={i}>{i}</p>
          ))}
      </div>
      <div
        style={{
          position: "fixed",
          left: 0,
          bottom: 0,
          right: 0,
          backgroundColor: "green"
        }}
      >
        footer
      </div>
    </>
  );
}

to add a long list of items and a footer below that.

We set the style prop of the footer to an object with position set to 'fixed'.

And we set left, bottom, and right all to 0 to always keep it at the bottom of the page.

Now when we scroll up or down, we should see the footer stay at the bottom of the page.

Conclusion

To keep the page footer at the bottom of the page with React, we can make the set the position of the footer element to fixed.

And we set the position of the footer to be at the bottom of the page.