Category: React

Sometimes, we want to define components with dynamic names with React and JSX.

In this article, we’ll look at how to define components with dynamic names with React and JSX.

Define Components with Dynamic Names with React and JSX

To define components with dynamic names with React and JSX, we can put the components in an object.

Then we can access the components with the key from the object.

For instance, we write:

import React from "react";

const PhotoStory = () => <div>photo</div>;

const VideoStory = () => <div>photo</div>;

const components = {
  photo: PhotoStory,
  video: VideoStory
};

const Story = ({ storyType }) => {
  const SpecificStory = components[storyType];
  return <SpecificStory />;
};

export default function App() {
  return <Story storyType="photo" />;
}

to create components object with the PhotoStory and VideoStory components as its property values.

Then in the Story component, we can get the component form the components object with the storyType prop and assign it to SpecificStory.

Finally, we use the Story component in App with the storyType set to 'photo' so we can render the PhotoStory component.

So we see ‘photo’ rendered on the screen.

Conclusion

To define components with dynamic names with React and JSX, we can put the components in an object.

Then we can access the components with the key from the object.

Sometimes, we may run into the ‘No restricted globals’ ESLint Error when developing a React app.

In this article, we’ll look at how to fix the ‘No restricted globals’ ESLint Error when developing a React app.

Fix the ‘No Restricted globals’ ESLint Error When Developing a React App

To fix the ‘No restricted globals’ ESLint Error when developing a React app, we can add the // eslint-disable-next-line no-restricted-globals comment before the code that is causing the error.

But the better solution is to put window before the variable that causes the error.

For instance, instead of writing location, we write window.location.

Conclusion

To fix the ‘No restricted globals’ ESLint Error when developing a React app, we can add the // eslint-disable-next-line no-restricted-globals comment before the code that is causing the error.

But the better solution is to put window before the variable that causes the error.

The equivalent of document.getElementById in React is refs.

We can assign a ref to an element and then retrieve the element that’s assigned the ref from the ref’s current property.

For instance, we write:

import React, { useRef } from "react";

export default function App() {
  const myContainer = useRef(null);
  console.log(myContainer.current);

  return (
    <>
      <div ref={myContainer}>I can use the DOM with react ref</div>
    </>
  );
}

to create a ref with the useRef hook and assign it to myContainer.

Then we assign the ref to the div by setting the ref prop of the div to myContainer.

Finally, we get the div by using the myContainer.current property.

Therefore, the console log should log the div as the value.

Sometimes, we want to map multiple path names to the same component in React Router v5.

In this article, we’ll look at how to map multiple path names to the same component in React Router v5.

Map Multiple Path Names to the Same Component in React Router v5

To map multiple path names to the same component in React Router v5, we can add a | symbol between the paths that we want to match.

For instance, we write:

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

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

export default function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/foo">foo</Link>
          </li>
          <li>
            <Link to="/bar">bar</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/(foo|bar)/" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

We create the Child component which we map either to the foo path or the bar path with '/(foo|bar)/'.

children is set to Child so it’ll be rendered.

And we have one Link that goes to the foo path and another that goes to bar.

Therefore, when we click on either link, we see ‘foo’ displayed.

Conclusion

To map multiple path names to the same component in React Router v5, we can add a | symbol between the paths that we want to match.

Sometimes, we want to get the height of an element with React.

In this article, we’ll look at how to get the height of an element with React.

Get the Height of an Element with React

To get the height of an element with React, we can assign a ref to the element we want to get the height for.

Then we can use the clientHeight property to get the height.

For instance, we write:

import React, { useRef } from "react";

export default function App() {
  const elementRef = useRef(null);
  console.log(elementRef.current?.clientHeight);

  return <div ref={elementRef}>hello world</div>;
}

We call the useRef hook and assign the returned ref to elementRef.

Then we set elementRef as the value of the ref prop of the div.

Finally, we log the height of the div by logging elementRef.current?.clientHeight.

Therefore, we should see 18 logged, which is the height of the div in pixels.

Conclusion

To get the height of an element with React, we can assign a ref to the element we want to get the height for.

Then we can use the clientHeight property to get the height.