Category: React

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.

Sometimes, we want to create dynamic href in React component

In this article, we’ll look at how to create dynamic href in React component.

How to create dynamic href in React component?

To create dynamic href in React component, we can use template strings.

For instance, we write

<a href={`/customer/${item._id}`}>
  {item.get("firstName")} {item.get("lastName")}
</a>;

in our component to set the href prop to the string returned by /customer/${item._id}.

Conclusion

To create dynamic href in React component, we can use template strings.