Category: JavaScript

To align a component to the right with MUI React, we set the Grid component’s justifyContent prop to flex-end.

For instance, we write

<Grid container justifyContent="flex-end">
  <Button>Example</Button>
</Grid>

to set the Grid component’s justifyContent prop to flex-end to align the Button inside to the right.

To show warnings instead of errors on all ESLint rules with React, we set each rule to 'warm' in .eslintrc.

For instance, we write

{
  "rules": {
    //...
    "prettier/prettier": "warn"
  }
}

to set "prettier/prettier" to "warn' in "rules' to make ESLint return a warning instead of an error when the rule is violated.

To access ‘this.props.match.params’ along with other props with React Router, we pass in the matchProps from the render prop function into our component.

For instance, we write

<Route
  path="/champions/:id"
  render={(matchProps) => (
    <ChampionDetails
      {...matchProps}
      {...this.props}
      handleMatch={this.handleMatch}
    />
  )}
/>

to add the Route component and pass in matchProps to the ChampionDetails component.

Now ChampionDetails has access to all the properties of matchProps as props.

To fix ‘Each child in an array or iterator should have a unique "key" prop’ with React, we add the key prop to the items being rendered with map.

For instance, we write

<div className="container">
  {myarray.map((element, index) => {
    return <div key={"mykey" + index}>{element}</div>;
  })}
</div>;

to call map with a function that renders divs.

We add the key prop to the div so React can identify each component being rendered.

To mock React useRef or a function inside a functional component with enzyme and Jest, we can mock the react module by mocking the useRef hook and getting the rest of the mocked module from the real module.

For instance, we write

import React, { useRef } from "react";
import { shallow } from "enzyme";
import Child2 from "./";

jest.mock("react", () => {
  const originReact = jest.requireActual("react");
  const mUseRef = jest.fn();
  return {
    ...originReact,
    useRef: mUseRef,
  };
});

describe("test", () => {
  it("should pass", () => {
    const mRef = { current: { offsetWidth: 100 } };
    useRef.mockReturnValueOnce(mRef);
    const wrapper = shallow(<Child2></Child2>);
    expect(wrapper.find("#myDiv").text()).toBe("123");
    expect(wrapper.find("p").text()).toBe("Div width is: 100");
  });
});

to mock the react module with jest.mock.

Then we call jest.requireActual to get the real react module.

We call mock with a function that returns the real react module except for the useRef hook which we set to a mocked function.

Then in our test, we call useRef.mockReturnValueOnce to return mRef as the mocked value and then run the rest of our test code.