Category: React Answers

To add an SVG with React, we can import it as a component and add it directly into our components.

For instance, we write

import React from "react";
import { ReactComponent as BrandIcon } from "./assets/brand-icon.svg";

export default function () {
  return (
    <div>
      <BrandIcon />
    </div>
  );
}

to import the BrandIcon SVG and put it into our component to render it.

<Grid container spacing={24}>
  <Grid item xs={4}>
    <TextField
      label="PS"
      value={ps}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
  <Grid item xs={4}>
    <TextField
      label="MOOE"
      value={mode}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
  <Grid item xs={4}>
    <TextField
      label="CO"
      value={co}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
</Grid>;

to add our TextFields into Grid components.

We set the width relative to the screen’s width with xs to set the width to 4 out of 12 of the screen width for all screen sizes.

The inner Grids has the item prop to make them an item inside the Grid with the container prop.

To write unit tests in React, we can use the react-dom/test-utils package.

For instance, we write

import React from "react";

export default function Hello(props) {
  if (props.name) {
    return <h1>Hello, {props.name}!</h1>;
  } else {
    return <span>Hey, stranger</span>;
  }
}

in hello.js.

Then in hello.test.js, we write

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Hello from "./hello";

let container = null;
beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("renders with or without a name", () => {
  act(() => {
    render(<Hello />, container);
  });
  expect(container.textContent).toBe("Hey, stranger");

  act(() => {
    render(<Hello name="Jenny" />, container);
  });
  expect(container.textContent).toBe("Hello, Jenny!");

  act(() => {
    render(<Hello name="Margaret" />, container);
  });
  expect(container.textContent).toBe("Hello, Margaret!");
});

to add a test for the Hello component.

We mount the component with render

Then we check the rendered content with expect.

The beforeEach callback runs before each test.

We use

container = document.createElement("div");

to create the render target element.

And the afterEach callback runs after each test.

We clean up after our tests in the afterEach callback.

To use setState callback on React hooks, we can use the useEffect hook.

For instance, we write

function Comp() {
  const [counter, setCounter] = useState(0);

  const doSomething = () => {
    setCounter(123);
  };

  useEffect(() => {
    console.log("Do something after counter has changed", counter);
  }, [counter]);

  //..
}

to create the counter state with useState.

Then we watch the counter state for changes with the useEffect hook called with [counter] as the 2nd argument.

The useEffect callback will run whenever counter changes.

To use the useRef hook in React, we call it in our component to return a ref.

Then we can assign that to an element.

For instance, we write

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

to set the input’s ref prop to the inputEl ref which we created with useRef.

Then we can access the input with inputEl.current.

And we call focus on it to focus on the input.