Category: React

Sometimes, we want to override the width of a TextField component with React MUI.

In this article, we’ll look at how to override the width of a TextField component with React MUI.

How to override the width of a TextField component with React MUI?

To override the width of a TextField component with React MUI, we use the fullWidth prop.

For instance, we write

<TextField
  id="full-width-text-field"
  label="Label"
  placeholder="Placeholder"
  margin="normal"
  fullWidth
/>

to add a text field that fill the width of the parent component.

Conclusion

To override the width of a TextField component with React MUI, we use the fullWidth prop.

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.