Category: React

Categories
React Answers

How to pass params to tab navigator React Navigation 5?

Labrador retriever puppy walking on green grass

To pass params to tab navigator React Navigation 5, we create a context and set put the value we want in the context.

Then any component inside the context provider can access the value.

For instance, we write

export const NetworkContext = React.createContext();

to create the NetworkContext and export it.

Then we write

const PostsTabNav = createMaterialTopTabNavigator();

const PostsMainNav = ({ route }) => {
  return (
    <NetworkContext.Provider value={route.params.network}>
      <PostsTabNav.Navigator>
        <PostsTabNav.Screen
          name="NetworkPosts"
          component={NetworkPostsScreen}
        />
        <PostsTabNav.Screen
          name="NetworkUsers"
          component={NetworkUsersScreen}
        />
      </PostsTabNav.Navigator>
    </NetworkContext.Provider>
  );
};

to create the PostsTabNav with createMaterialTopTabNavigator.

And then we wrap NetworkContext.Provider around the PostsTabNav components and set the context value to route.params.network.

Then the PostsTabNav components can access route.params.network with the context.

Categories
React Answers

How to add external JavaScript files with script tags in React Next.js?

Labrador retriever puppy walking on green grass

To add external JavaScript files with script tags in React Next.js, we add the script tags into the Head component.

For instance, we write

import Head from "next/head";

const Layout = (props) => (
  <div>
    <Head>
      <script type="text/javascript" src="..."></script>
      <script type="text/javascript" src="/js/myscript.js"></script>
    </Head>
    <p id="demo"></p>
  </div>
);

export default Layout;

to add the script tags into the Next.js Head component.

Categories
React Answers

How to focus a React Material UI TextField on button click?

Labrador retriever puppy walking on green grass

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.

Categories
React Answers

How to simulate keydown on document with Jest?

Labrador retriever puppy walking on green grass

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.

Categories
React Answers

How to implement HTML entity decode in React>?

Labrador retriever puppy walking on green grass

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.