Category: React Answers

Sometimes, we want to get a component’s name in React.

In this article, we’ll look at how to get a component’s name in React.

How to get a component’s name in React?

To get a component’s name in React, we can use the displayName property.

For instance, we write:

import React from "react";

const Foo = () => <p>foo</p>;
Foo.displayName = "Foo";

export default function App() {
  return <Foo />;
}

to set the Foo.displayName property to the name we want.

Then we can retrieve it in the code and the React developer tools.

Conclusion

To get a component’s name in React, we can use the displayName property.

Sometimes, we want to highlight text using React.

In this article, we’ll look at how to highlight text using React.

How to highlight text using React?

To highlight text using React, we can create our own component where we check whether each word matches what we want to highlight.

For instance, we write:

import React from "react";

const Highlighted = ({ text = "", highlight = "" }) => {
  if (!highlight.trim()) {
    return <span>{text}</span>;
  }
  const regex = new RegExp(`(${highlight})`, "gi");
  const parts = text.split(regex);

  return (
    <span>
      {parts.filter(String).map((part, i) => {
        return regex.test(part) ? (
          <mark key={i}>{part}</mark>
        ) : (
          <span key={i}>{part}</span>
        );
      })}
    </span>
  );
};

export default function App() {
  return (
    <Highlighted
      text="the quick brown fox jumps over the lazy dog"
      highlight="fox"
    />
  );
}

to create the Highlighted component to highlight the text set as the highlight option.

To do the highlight, we create a regex that takes the highlight text and put it in parentheses so that they’ll be kept when we split the text with split.

We set the flags to 'gi' to look globally for matches in a case insensitive manner for the highlight.

Then we call text.split with regex to split the text.

Next, we render a span and we check for each part entry in parts.

If the part matches the regex as we check with regex.test, when we render it in a mark element to highlight it.

Otherwise, we render it in a span.

As a result, we should see the word ‘fox’ highlighted in the sentence.

Conclusion

To highlight text using React, we can create our own component where we check whether each word matches what we want to highlight.

Sometimes, we want to create optgroups in react-select.

In this article, we’ll look at how to create optgroups in react-select.

How to create optgroups in react-select?

To create optgroups in react-select, we just have to nest the option objects in the options array.

For instance, we write:

import React from "react";
import Select from "react-select";

const options = [
  {
    label: "Group 1",
    options: [
      { label: "Group 1, option 1", value: "value1" },
      { label: "Group 1, option 2", value: "value2" }
    ]
  },
  { label: "A root option", value: "value3" },
  { label: "Another root option", value: "value4" }
];
export default function App() {
  return <Select options={options} />;
}

to create the ‘Group 1’ optgroup with:

{
  label: "Group 1",
  options: [
    { label: "Group 1, option 1", value: "value1" },
    { label: "Group 1, option 2", value: "value2" }
  ]
}

in the options array.

Then we set the options prop to the options array to render the options.

Therefore, we see the ‘Group 1’ option group displayed in the select drop down.

Conclusion

To create optgroups in react-select, we just have to nest the option objects in the options array.

Sometimes, we want to edit multiple input controlled components in React.

In this article, we’ll look at how to edit multiple input controlled components in React.

How to edit multiple input controlled components in React?

To edit multiple input controlled components in React, we can create a function that returns the change event handler function according to the property we want to edit.

For instance, we write:

import React, { useState } from "react";

const initialContact = { firstName: "", lastName: "", phone: "" };

export default function App() {
  const [contact, setContact] = useState(initialContact);

  const handleChangeFor = (propertyName) => (event) => {
    setContact((contact) => ({
      ...contact,
      [propertyName]: event.target.value
    }));
  };

  return (
    <div>
      <input
        type="text"
        onChange={handleChangeFor("firstName")}
        value={contact.firstName}
      />
      <input
        type="text"
        onChange={handleChangeFor("lastName")}
        value={contact.lastName}
      />
      <input
        type="text"
        onChange={handleChangeFor("phone")}
        value={contact.phone}
      />
    </div>
  );
}

We define the contact state with the useState hook.

Then we have the handleChangeFor function that takes the propertyName to change.

And we return the change event handler function that calls setContact to change the contact state to update the propertyName property’s value by setting it to e.target.value.

e.target.value has the inputted value.

Finally, we set the onChange prop of each input to the event handlers returned by handleChangeFor called with the property name of each contact property.

Conclusion

To edit multiple input controlled components in React, we can create a function that returns the change event handler function according to the property we want to edit.

Sometimes, we want to show HTML entities using React.

In this article, we’ll look at how to show HTML entities using React.

How to show HTML entities using React?

To show HTML entities using React, we can wrap the HTML entity string with fragment.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      2<>&sup3;</>
    </div>
  );
}

We wrap ³ in a fragment so that it’ll be rendered.

Therefore, we see 2³ displayed on the screen.

Conclusion

To show HTML entities using React, we can wrap the HTML entity string with fragment.