Category: React Answers

Sometimes, we need to add polyfills for ES6 features in React app that is created with create-react-app.

In this article, we’ll look at how to add polyfills for ES6 features in React app that is created with create-react-app.

Add Polyfills for ES6 Features in React App that is Created with create-react-app

To add polyfills for ES6 features in React app that is created with create-react-app, we can install the react-app-polyfill-core-js package.

To install it, we run:

npm install react-app-polyfill core-js

or

yarn add react-app-polyfill core-js

Then we create a polyfills.js file and add:

import 'react-app-polyfill/ie11';
import 'core-js/features/array/find';
import 'core-js/features/array/includes';
import 'core-js/features/number/is-nan';

at the top of the file.

This will import and run all the polyfill code to add all the required ES6 features.

And then we import the polyfills with:

import './polyfills'

in index.js.

Conclusion

To add polyfills for ES6 features in React app that is created with create-react-app, we can install the react-app-polyfill-core-js package.

Sometimes, we want to display line breaks from saved text area in a React component.

In this article, we’ll look at how to display line breaks from saved text area in a React component.

Display Line Breaks from Saved Text Area in a React Component

To display line breaks from saved text area in a React component, we can set the white-space CSS property to pre-line.

For instance, we write:

import React from "react";

const value = `Lorem ipsum dolor sit amet\n consectetur adipiscing elit.`;

export default function App() {
  return (
    <>
      <style>
        {`#p-wrap {
          white-space: pre-line;
        }`}
      </style>
      <textarea value={value}></textarea>
      <p id="p-wrap">{value}</p>
    </>
  );
}

We have the p-wrap class that has the white-space CSS property set to pre-line.

Then we apply that class to the p element.

And now we should see the text broken into 2 lines according to the line breaks.

Conclusion

To display line breaks from saved text area in a React component, we can set the white-space CSS property to pre-line.

Sometimes, we want to make links active with React Router v5.

In this article, we’ll look at how to make links active with React Router v5.

Make Links Active with React Router v5

To make links active with React Router v5, we can use the NavLink component to add our links.

Then we add the activeClassName to set the class name for active links.

For instance, we write:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";

const Foo = () => {
  return <p>foo</p>;
};

const Bar = () => {
  return <p>bar</p>;
};

export default function App() {
  return (
    <Router>
      <style>{`.is-active { font-weight: bold }`}</style>
      <div>
        <ul>
          <li>
            <NavLink to="/foo" activeClassName="is-active">
              foo
            </NavLink>
          </li>
          <li>
            <NavLink to="/bar" activeClassName="is-active">
              bar
            </NavLink>
          </li>
        </ul>

        <Switch>
          <Route path="/foo" children={<Foo />} />
          <Route path="/bar" children={<Bar />} />
        </Switch>
      </div>
    </Router>
  );
}

We add the Routes to map the URLs to the components to render.

Then we add the NavLinks to add links that lets us set the class name of the active link.

We set activeClassName to a string for the class name of the active link.

In the style element, we add a string to style anything with the is-active class by making the font bold.

Therefore, when we click on the links, we’ll see the link for the current page bolded.

Conclusion

To make links active with React Router v5, we can use the NavLink component to add our links.

Then we add the activeClassName to set the class name for active links.

Sometimes, we want to conditionally wrap a React component.

In this article, we’ll look at how to conditionally wrap a React component.

Conditionally Wrap a React Component

To conditionally wrap a React component, we can create our own higher-order component.

For instance, we write:

import React from "react";

const WithLink = ({ link, className, children }) =>
  link ? (
    <a href={link} className={className}>
      {children}
    </a>
  ) : (
    children
  );

export default function App() {
  return (
    <>
      <p>
        <WithLink link="https://example.com" className="link">
          example
        </WithLink>
      </p>
      <p>
        <WithLink className="link">example</WithLink>
      </p>
    </>
  );
}

We create the WithLink component that takes the link, className and children props.

If link is set, then we return an a element with children as its content.

Otherwise, we return children as is.

In App, we use WithLink with and without the link prop.

If link is set, then we see a link rendered.

Otherwise, the content inside WithLink is rendered as is.

Conclusion

To conditionally wrap a React component, we can create our own higher-order component.

Sometimes, we want to repeat an element n times using JSX.

In this article, we’ll look at how to repeat an element n times using JSX.

Repeat an Element n Times Using JSX

To repeat an element n times using JSX, we can create an array with n empty slots with the Array constructor.

Then we call map to map that into the element we want to display.

For instance, we write:

import React from "react";

const n = 8;

export default function App() {
  return (
    <>
      {[...Array(n)].map((e, i) => (
        <span className="diamond" key={i}>
          ♦
        </span>
      ))}
    </>
  );
}

to repeat the diamond character 8 times.

We set n to 8.

Then we pass that in as the argument of Array to create an array with 8 empty slots.

Next, we spread that into an array to return an array with 8 undefined entries.

Finally, we call map with a callback that returns a span with the diamond in it.

Conclusion

To repeat an element n times using JSX, we can create an array with n empty slots with the Array constructor.

Then we call map to map that into the element we want to display.