Category: React Answers

Sometimes, we want to fix Uncaught ReferenceError: ReactDOM is not defined with JavaScript.

In this article, we’ll look at how to fix Uncaught ReferenceError: ReactDOM is not defined with JavaScript.

How to fix Uncaught ReferenceError: ReactDOM is not defined with JavaScript?

To fix Uncaught ReferenceError: ReactDOM is not defined with JavaScript, we should make sure we import it.

For instance, we write

import ReactDOM from "react-dom";

to import it.

Conclusion

To fix Uncaught ReferenceError: ReactDOM is not defined with JavaScript, we should make sure we import it.

Sometimes, we want to get selected option text using React.

In this article, we’ll look at how to get selected option text using React.

How to get selected option text using React?

To get selected option text using React, we use the properties in the event object.

For instance, we write

const { options, selectedIndex } = e.target;
console.log(options[selectedIndex].innerHTML);

in the change event handler to get the options and selectedIndex properties from the e.target drop down.

options has all the option elements in the drop down.

selectedIndex has the index of the option selected.

Then we get the option selected with options[selectedIndex].

And we get its content with innerHTML.

Conclusion

To get selected option text using React, we use the properties in the event object.

Sometimes, we want to navigate on path by button click in React Router v4.

In this article, we’ll look at how to navigate on path by button click in React Router v4.

How to navigate on path by button click in React Router v4?

To navigate on path by button click in React Router v4, we use the useHistory hook.

For instance, we write

import React from "react";
import { useHistory } from "react-router-dom";

export default () => {
  const history = useHistory();

  return <button onClick={() => history.push("/your/path")}>Click me</button>;
};

to call useHistory to get the history object.

Then we call history.push with the path we want to go to in the click handler of the button.

Conclusion

To navigate on path by button click in React Router v4, we use the useHistory hook.

Sometimes, we want to fix current is always null when using React.createRef with React.

In this article, we’ll look at how to fix current is always null when using React.createRef with React.

How to fix current is always null when using React.createRef with React?

To fix current is always null when using React.createRef with React, we assign the ref created by createRef to an element.

For instance, we write

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.test = React.createRef();
  }

  handleClick = () => console.log(this.test.current.value);

  render() {
    return (
      <div>
        <input ref={this.test} />
        <button onClick={this.handleClick}>Get Value</button>
      </div>
    );
  }
}

to create the test ref with createRef.

Then we assign test as the value of the ref prop of the input.

Finally, we get the ref’s value with this.test.current.value, which should be set to the input.

Conclusion

To fix current is always null when using React.createRef with React, we assign the ref created by createRef to an element.

Sometimes, we want to add export to CSV button in React table with JavaScript.

In this article, we’ll look at how to add export to CSV button in React table with JavaScript.

How to add export to CSV button in React table with JavaScript?

To add export to CSV button in React table with JavaScript, we use the react-csv package.

To install it, we run

npm i react-csv

Then we use it by writing

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["John", "Doe", "john.doe@xyz.com"],
  ["Jane", "Doe", "jane.doe@xyz.com"],
];

const Comp = () => {
  //...
  return <CSVLink data={csvData}>Download me</CSVLink>;
};

to add the CSVLink component to add a button to let the user export the array data into a csv.

We can also write

import { CSVLink, CSVDownload } from "react-csv";

const csvData = [
  ["firstname", "lastname", "email"],
  ["John", "Doe", "john.doe@xyz.com"],
  ["Jane", "Doe", "jane.doe@xyz.com"],
];

const Comp = () => {
  //...
  return <CSVDownload data={csvData} target="_blank" />;
};

to do the same think by adding a link instead of a button.

Conclusion

To add export to CSV button in React table with JavaScript, we use the react-csv package.