Category: React

Sometimes, we may encounter the "REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th" error when developing React apps.

In this article, we’ll look at how to fix the "REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th" error when developing React apps.

Fix the "REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th" Error When Developing React Apps

To fix the "REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th" error when developing React apps, we should make sure that the direct child elements of the table element is a either thead or tr element.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>name</th>
          <th>age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>john</td>
          <td>33</td>
        </tr>
        <tr>
          <td>smith</td>
          <td>22</td>
        </tr>
        <tr>
          <td>jane</td>
          <td>24</td>
        </tr>
      </tbody>
    </table>
  );
}

to render a table with the proper headings and rows.

We only put tr elements in the tbody elements.

Conclusion

To fix the "REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th" error when developing React apps, we should make sure that the direct child elements of the table element is a either thead or tr element.

Sometimes, we may encounter the "A ‘Router’ may have only one child element" Error with React Router.

In this article, we’ll look at how to fix the "A ‘Router’ may have only one child element" Error with React Router.

Fix the "A ‘Router’ may have only one child element" Error with React Router

To fix the "A ‘Router’ may have only one child element" when developing React apps with React Router, we should make sure we have only one child component inside the Router component.

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>
      <div>
        <ul>
          <li>
            <NavLink to="/foo">foo</NavLink>
          </li>
          <li>
            <NavLink to="/bar">bar</NavLink>
          </li>
        </ul>

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

to wrap everything inside Router in a single div.

Conclusion

To fix the "A ‘Router’ may have only one child element" when developing React apps with React Router, we should make sure we have only one child component inside the Router component.

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.