Category: JavaScript

To focus a React Material UI TextField on button click, we assign a ref to the TextField by assign a ref to the inputRef orop of the TextField.

Then we can call focus on the element we get from the ref.

For instance, we write

import React, { useState, useRef } from "react";

const Comp = (props) => {
  const textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.focus();
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
};

to call the useRef to create the textInput ref.

Then we assign textInput as the value of the inputRef prop.

And then we call textInput.current.focus( to focus the element in the button’s click handler.

To simulate keydown on document with Jest, we create a new KeyboardEvent instance.

For instance, we write

const event = new KeyboardEvent("keydown", { keyCode: 37 });
document.dispatchEvent(event);

to create a new KeyboardEvent instance with the 'keydown' event.

And we set the event object to { keyCode: 37 }.

Then we call document.dispatchEvent with the event object to dispatch the keydown event with key code 37.

To implement HTML entity decode in React, we can use the he library.

To install it, we run

npm install he

Then we use it by writing

import he from "he";

export class FullInfoMedia extends React.Component {
  render() {
    const renderHTML = (escapedHTML: string) =>
      React.createElement("div", {
        dangerouslySetInnerHTML: { __html: escapedHTML },
      });

    return (
      <div>
        <div className="about-title">
          <div className="container">
            <div className="row">
              <img className="center-block" src={this.props.about.image} />
              <h2>{this.props.about.title}</h2>
              {he.decode(this.props.about.body)}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

to call he.decode to decode the this.props.about.body string’s HTML entity values by returning a new string with the decoded value.

To check the actual DOM node using React enzyme, we use the findDOMNode and wrapper.instance methods.

For instance, we write

import ReactDOM from "react-dom";

//...

const wrapper = mount(<input type="text" defaultValue="sup" />);
console.log(ReactDOM.findDOMNode(wrapper.instance()) === wrapper.instance());

to mount the input component with mount.

Then we call ReactDOM.findDOMNode with wrapper.instance() to find the DOM node for the instance.

And we check that against wrapper.instance() to see if it returns the same DOM node.