Category: React

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();
});

To fix ‘Reference Error: localstorage is not defined’ with React and Next.js, we should check if window is defined before trying to use local storage.

For instance, we write

const ISSERVER = typeof window === "undefined";

if (!ISSERVER) {
  localStorage.get("...");
}

to check if window is 'undefined' with typeof.

If it’s defined, then the app isn’t server-side rendered and we can use browser APIs like localStorage.

To disable a link in React, we use some CSS styles.

For instance, we write

const C = (props) => {
  return (
    <li>
      {props.notClickable ? (
        <Link
          to="/"
          className="disabledCursor"
          onClick={(event) => event.preventDefault()}
        >
          Link
        </Link>
      ) : (
        <Link to="/" className="notDisabled">
          Link
        </Link>
      )}
    </li>
  );
};

to add Link components.

Then we event.preventDefault() to disable the default behavior when responding to clicks.

And we change the cursor when we hover over the disabled link with

.disabledCursor { 
  cursor: default;
}