Category: React

Sometimes, we want to call JavaScript function from another file in React.

In this article, we’ll look at how to call JavaScript function from another file in React.

How to call JavaScript function from another file in React?

To call JavaScript function from another file in React, we export the function we want to call and then import it.

For instance, we write

export const plusSlides = (n) => {
  showSlides((slideIndex += n));
};

in slideShow.js.

Then we write

import { plusSlides } from "./slideShow";

//...

const Comp = () => {
  //...
  const handleClick = (event) => {
    plusSlides(1);
  };
  //...
};

to import the plusSlides function from the slideShow.js file.

And then we call it in the handleClick function.

Conclusion

To call JavaScript function from another file in React, we export the function we want to call and then import it.

Sometimes, we want to change the URL in react-router v4 without using Redirect or Link with JavaScript.

In this article, we’ll look at how to change the URL in react-router v4 without using Redirect or Link with JavaScript.

How to change the URL in react-router v4 without using Redirect or Link with JavaScript?

To change the URL in react-router v4 without using Redirect or Link with JavaScript, we call the history.push method.

For instance, we write

this.props.history.push("/foo");

to call history.push with '/foo' to navigate to /foo.

Conclusion

To change the URL in react-router v4 without using Redirect or Link with JavaScript, we call the history.push method.

Sometimes, we want to add CSS display: none within conditional with React JSX.

In this article, we’ll look at how to add CSS display: none within conditional with React JSX.

How to add CSS display: none within conditional with React JSX?

To add CSS display: none within conditional with React JSX, we set the style prop.

For instance, we write

<div style={{ display: showStore ? "block" : "none" }}>
  <div>a lot more divs</div>
</div>

to set the style prop to an object that has the display property set to 'block' if showStore is true and 'none' otherwise.

Conclusion

To add CSS display: none within conditional with React JSX, we set the style prop.

Sometimes, we want to fix TypeError: Cannot read property ‘props’ of undefined with React.

In this article, we’ll look at how to fix TypeError: Cannot read property ‘props’ of undefined with React.

How to fix TypeError: Cannot read property ‘props’ of undefined with React?

To fix TypeError: Cannot read property ‘props’ of undefined with React, we should make sure the value of this is correct.

For instance, we write

class Parent extends React.Component {
  state = {
    //...
  };

  onDelete = () => {
    //...
  };

  render() {
    return <Child onDelete={this.onDelete} />;
  }
}

to add the onDelete function which has the value of this set to the Parent component instance since it’s an arrow function.

Conclusion

To fix TypeError: Cannot read property ‘props’ of undefined with React, we should make sure the value of this is correct.

Sometimes, we want to fix onClick doesn’t render new React component.

In this article, we’ll look at how to fix onClick doesn’t render new React component.

How to fix onClick doesn’t render new React component?

To fix onClick doesn’t render new React component, we can use React Router.

For instance, we write

import { withRouter } from "react-router-dom";
import Button from "components/button";

const yourComponent = ({ history }) => {
  return (
    <Button onClick={() => history.push("/path")}> New componentPage </Button>
  );
};

export default withRouter(yourComponent);

to create the yourComponent component that calls history.push with the destination path to navigate to it when we click on the button.

The history prop is available since we call withRouter with yourComponent.

Conclusion

To fix onClick doesn’t render new React component, we can use React Router.