Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to fix cannot update a component while rendering a different component warning with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix cannot update a component while rendering a different component warning with React.

In this article, we’ll look at how to fix cannot update a component while rendering a different component warning with React.

How to fix cannot update a component while rendering a different component warning with React?

To fix cannot update a component while rendering a different component warning with React, we should call functions from props inside the useEffect callback or in functions in the component.

For instance, we write

const HomePage = (props) => {
  useEffect(() => {
    props.setAuthenticated(true);
  }, []);

  const handleChange = (e) => {
    props.setSearchTerm(e.target.value.toLowerCase());
  };

  return (
    <div key={props.restInfo.storeId} className="container-fluid">
      <ProductList searchResults={props.searchResults} />
    </div>
  );
};

to call the props.setAuthenticated function inside the useEffect callback when the component mounts.

If we call it in the component at the top level, then the function runs on every render, which triggers the warning.

Conclusion

To fix cannot update a component while rendering a different component warning with React, we should call functions from props inside the useEffect callback or in functions in the component.

Categories
JavaScript Answers

How to handle specific errors in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to handle specific errors in JavaScript.

In this article, we’ll look at how to handle specific errors in JavaScript.

How to handle specific errors in JavaScript?

To handle specific errors in JavaScript, we use the instanceof operator.

For instance, we write

try {
  //...
} catch (e) {
  if (e instanceof SpecificError) {
    // ...
  } else {
    throw e;
  }
}

to check if e in the catch block is an instance of the SpecificError constructor with

e instanceof SpecificError

Then we do what we want if that’s true.

Conclusion

To handle specific errors in JavaScript, we use the instanceof operator.

Categories
JavaScript Answers

How to listen to input value change with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to listen to input value change with JavaScript.

In this article, we’ll look at how to listen to input value change with JavaScript.

How to listen to input value change with JavaScript?

To listen to input value change with JavaScript, we can call addEventListener to add the change event listener.

For instance, we write

<input type="text" name="thing" value="" />

to add an input.

Then we write

const doThing = (e) => {
  console.log(e.target.value);
};

document.getElementsByName("thing")[0].addEventListener("change", doThing);

to select the input by its name attribute value with

document.getElementsByName("thing")[0]

Then we call addEventListener to listen to the change event with the doThing function, which is emitted when we change the input value.

In doThing, we get the input value with e.target.value.

Conclusion

To listen to input value change with JavaScript, we can call addEventListener to add the change event listener.

Categories
JavaScript Answers

How to fix cannot set property of undefined with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix cannot set property of undefined with JavaScript.

In this article, we’ll look at how to fix cannot set property of undefined with JavaScript.

How to fix cannot set property of undefined with JavaScript?

To fix cannot set property of undefined with JavaScript, we should make sure we’re setting a property on an object.

For instance, we write

d = {
  [a]: {
    greetings: b,
    data: c,
  },
};

d[a]["greeting"] = "hello";

to assign d to an object.

Then we can set d[a]["greeting"] to 'hello' since d[a] is an object that has the greetings property.

Conclusion

To fix cannot set property of undefined with JavaScript, we should make sure we’re setting a property on an object.

Categories
JavaScript Answers

How to properly make mock throw an error in Jest?

Labrador retriever puppy walking on green grass

Sometimes, we want to properly make mock throw an error in Jest.

In this article, we’ll look at how to properly make mock throw an error in Jest.

How to properly make mock throw an error in Jest?

To properly make mock throw an error in Jest, we call the mockImplementation method and throw an error in the callback we call the method with.

For instance, we write

it("should throw error if email not found", async () => {
  callMethod
    .mockImplementation(() => {
      throw new Error("User not found [403]");
    })
    .mockName("callMethod");

  const query = FORGOT_PASSWORD_MUTATION;
  const params = { email: "user@example.com" };
  const result = await simulateQuery({ query, params });

  console.log(result);
  expect(callMethod()).rejects.toMatch("User not found [403]");
});

to call callMethod.mockImplementation with a callback that throws and error.

Then we use

expect(callMethod()).rejects.toMatch("error");

to check the callMethod throws an error with the given content.

Conclusion

To properly make mock throw an error in Jest, we call the mockImplementation method and throw an error in the callback we call the method with.