How to handle functional component error in React 16.8?

Question

React

The component takes a string in props and tries to convert it into a regular expression.

function ControlString(props) {
    const regExp = new RegExp(props.template, "g");
    ...
}

The update is called for every character entered, so if you try to type '\d' in the parent, the constructor will throw an error on a single slash.

componentDidCatch does not work in functions. How can this exception be handled without casting the entire component to a class?

Answer 1

The error is still easier to handle not in the child, but in the parent.
The solution came down to this:

const [input, setInput] = useState("");
const [expression, setExpression] = useState("");

const updateInput = e => {
  setInput(e.target.value);
  try {
    new RegExp(e.target.value, "g");
    setExpression(e.target.value);
  } catch (e) {
    setExpression(".^");
  }
};

return (
  <input onChange={updateInput} />
  <ControlString template={expression} />
);

Answer 2

Generally, there are fuses . But you can handle the error when calling the RegExp constructor via try-catch,