Category: React Answers

Sometimes, we want to fix setTimeout() not working with React.

In this article, we’ll look at how to fix setTimeout() not working with React.

How to fix setTimeout() not working with React?

To fix setTimeout() not working with React, we can use call setState in the setTimneout callback.

For instance, we write

setTimeout(() => this.setState({ position: 1 }), 3000);

to call setTimeout with a callback that calls this.setState.

We use an arrow function for the callback since it doesn’t bind to its own value of this.

This means this will still be the component instance.

Conclusion

To fix setTimeout() not working with React, we can use call setState in the setTimneout callback.

Sometimes, we want to conditionally pass prop to component inline with React.

In this article, we’ll look at how to conditionally pass prop to component inline with React.

How to conditionally pass prop to component inline with React?

To conditionally pass prop to component inline with React, we can use the spread and ternary operators.

For instance, we write

<Child
  {...(this.props.editable ? { editable: this.props.editableOpts } : {})}
/>;

to set the props for Child according to the value of this.props.editable.

If it’s true, then we spread the properties of { editable: this.props.editableOpts } as its props.

Otherwise, we spread an empty object.

Conclusion

To conditionally pass prop to component inline with React, we can use the spread and ternary operators.

Sometimes, we want to fix React JSX file giving error "Cannot read property ‘createElement’ of undefined" error.

In this article, we’ll look at how to fix React JSX file giving error "Cannot read property ‘createElement’ of undefined" error.

How to fix React JSX file giving error "Cannot read property ‘createElement’ of undefined" error?

To fix React JSX file giving error "Cannot read property ‘createElement’ of undefined" error, we need to import React in our JSX file.

For instance, we write

import * as React from 'react';

to import the 'react' module as React.

Then then error will go away.

Conclusion

To fix React JSX file giving error "Cannot read property ‘createElement’ of undefined" error, we need to import React in our JSX file.

Sometimes, we want to change child component’s state from parent component with React.

In this article, we’ll look at how to change child component’s state from parent component with React.

How to change child component’s state from parent component with React?

To change child component’s state from parent component with React, we can pass props.

For instance, we write

const Child = ({ open }) => {
  return <Drawer open={open} />;
};

const ParentComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleChildMenu = () => {
    setIsOpen((prevValue) => !prevValue);
  };

  return (
    <div>
      <button onClick={toggleChildMenu}>Toggle Menu from Parent</button>
      <Child open={isOpen} />
    </div>
  );
};

to set the open prop of the Child component to the isOpen state’s value in ParentComponent.

Then in child we pass the open prop as the value of the open prop of the Drawer.

Conclusion

To change child component’s state from parent component with React, we can pass props.

Sometimes, we want to import JSON file in React.

In this article, we’ll look at how to import JSON file in React.

How to import JSON file in React?

To import JSON file in React, we use import to import it like a regular module.

For instance, we write

import Profile from "./components/profile";

to import the ./components/profile JSON file as Profile.

This works because the json-loader Webpack module is included with create-react-app.

Conclusion

To import JSON file in React, we use import to import it like a regular module.