Category: JavaScript

To get page URL or hostname in Next.js project, we can use next-absolute-url.

For instance, we write

import absoluteUrl from "next-absolute-url";
const { origin } = absoluteUrl(req);
const apiURL = `${origin}/api/job.js`;

to call absoluteUrl with req and then get the hostname from the origin property of the returned object.

To prevent e and dot in an input type number with React, we can validate the input value in the onChange prop function.

For instance, we write

const C = () => {
  //...
  const [val, setVal] = useState("");
  return (
    <div className="App">
      <input
        type="text"
        value={val}
        onChange={(e) => setVal(e.target.value.replace(/[^0-9]/g, ""))}
      />
    </div>
  );
};

to set the onChange prop to a function that replaces non number values with empty strings before call setVal with the string returned by replace that removes all the non digit characters in the input value.

Then we set value to val to show the input value without non digit characters.

To post request with JSON data with Axios, we call axios.post with the JSON payload as the 2nd argument.

For instance, we write

const dt = { data: { value: "abc" } };
const request = axios.post(url, dt);

to call axios.post with the request url and dt JSON request payload data.

Therefore, { data: { value: "abc" } } is the JSON request data for this POST request.

To call a method from another class component in React.js, we pass the function from the parent component to the child as a prop.

Then we call the parent component’s method that we got from the prop.

For instance, we write

export class Class1 extends Component {
  render() {
    return <div onClick={this.props.callApi}></div>;
  }
}

to set onClick to this.props.callApi to call callApi when we click on the div.

Then we write

export class Class2 extends Component {
  callApi = () => {
    //...
  };

  render() {
    return <Class1 callApi={this.callApi} />;
  }
}

to add the Class2 component that renders Class1 and pass callApi to Class1 by setting the callApi prop to this.callApi.

To reset store after logout with Apollo client and React, we set the Mutation component’s onCompleted prop to a function that clears the store.

For instance, we write

<Mutation
  mutation={LOGOUT_MUTATION}
  onCompleted={() => {
    sessionStorage.clear();
    client.clearStore().then(() => {
      client.resetStore();
      history.push("/login");
    });
  }}
>
  {(logout) => (
    <button
      onClick={() => {
        logout();
      }}
    >
      Logout <span>{user.userName}</span>
    </button>
  )}
</Mutation>;

to set onCompleted to a function that clears sessionStorage with

sessionStorage.clear();

Then we clear the Apollo store with

client.clearStore().then(() => {
  client.resetStore();
});