Category: React Answers

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.

To style an Alert element in React Native, we set the Modal‘s style prop.

For instance, we write

<Modal style={{ background: "red" }} ref={"modal1"}>
  <Text style={{ color: "white" }}>Basic modal</Text>
  <Button onPress={this.toggleSwipeToClose} style={styles.btn}>
    Disable swipeToClose({this.state.swipeToClose ? "true" : "false"})
  </Button>
</Modal>

to set the style prop of the Modal to { background: "red" } to make the background red.

And we set the Text style by setting the Text‘s style prop to { color: "white" }.

And we set the Button‘s style to styles.btn

To trigger a Redux action from outside a component with React, we call store.dispatch from anywhere in our project.

For instance, we write

import { store } from "/path/to/createdStore";

function testAction(text) {
  return {
    type: "TEST_ACTION",
    text,
  };
}

store.dispatch(testAction("StackOverflow"));

to call the testAction function to return the action type and text value.

And then we call store.dispatch to with the object returned by testAction to dispatch the TEST_ACTION action.

To mock localStorage methods with Jest, we call jest.spyOn.

For instance, we write

jest.spyOn(window.localStorage.__proto__, "setItem");

to call jest.spyOn with window.localStorage.__proto__, which is the local storage prototype.

We mock the localStorage.setItem method by calling spyOn with 'setItem' as the 2nd argument.