Category: JavaScript

Sometimes, we want to fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app.

In this article, we’ll look at how to fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app.

Fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb When Developing a React App

To fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app, we can add the "react/jsx-filename-extension" to allow files with the .js extension to include JSX code in our .eslintrc file.

To do this, we write:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

to allow JSX code to be added to files with the .js and .jsx extensions.

Conclusion

To fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app, we can add the "react/jsx-filename-extension" to allow files with the .js extension to include JSX code in our .eslintrc file.

Sometimes, we want to get the height of an element with React.

In this article, we’ll look at how to get the height of an element with React.

Get the Height of an Element with React

To get the height of an element with React, we can assign a ref to the element we want to get the height for.

Then we can use the clientHeight property to get the height.

For instance, we write:

import React, { useRef } from "react";

export default function App() {
  const elementRef = useRef(null);
  console.log(elementRef.current?.clientHeight);

  return <div ref={elementRef}>hello world</div>;
}

We call the useRef hook and assign the returned ref to elementRef.

Then we set elementRef as the value of the ref prop of the div.

Finally, we log the height of the div by logging elementRef.current?.clientHeight.

Therefore, we should see 18 logged, which is the height of the div in pixels.

Conclusion

To get the height of an element with React, we can assign a ref to the element we want to get the height for.

Then we can use the clientHeight property to get the height.

Sometimes, we want to set body styles within our React app.

In this article, we’ll look at how to set body styles within our React app.

Set Body Styles with React

Within our React component, we can set the body style with plain JavaScript.

For instance, we can write:

componentDidMount(){
  document.body.style.backgroundColor = "green";
}

componentWillUnmount(){
  document.body.style.backgroundColor = null;
}

We set the document.body.style.backgroundColor property to set the background color.

componentDidMount lets us run code when the component mounts.

componentWillUnmount runs when the component unmounts.

Conclusion

Within our React component, we can set the body style with plain JavaScript.

Sometimes, we want to set the content of an iframe of a React component.

In this article, we’ll look at how to set the content of an iframe of a React component.

Set the Content of an Iframe of a React Component

To set the content of an iframe of a React component, we can set the srcDoc prop of the iframe element.

For instance, we can write:

import React from "react";

export default function App() {
  const myHTML = `<h1>Hello World</h1>`;
  return (
    <div>
      <iframe srcDoc={myHTML} title="hello" />
    </div>
  );
}

to set the srcDoc prop to the HTML string that we want to display as the iframe’s content.

Therefore, we should see ‘Hello World’ displayed inside the iframe.

Conclusion

To set the content of an iframe of a React component, we can set the srcDoc prop of the iframe element.

Sometimes, we want to get the HTML5 input slider working in React.

In this article, we’ll look at how to get the HTML5 input slider working in React.

Get the HTML5 Input Slider Working in React

To get the HTML5 input slider working in React, we either set the value and onChange props or we can leave them both out.

For instance, we can write:

import React, { useState } from "react";

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <input
      type="range"
      min="0"
      max="5"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      step="1"
    />
  );
}

We add the value prop and set it to the value state.

And we set the onChange prop to a function that calls setValue with e.target.value , which has the selected number value.

This makes the range slider a controlled component which means its value is controlled by a state.

We can also leave them both out if we don’t want to bind the value of the range slider to a state.

This would make it an uncontrolled input.

Conclusion

To get the HTML5 input slider working in React, we either set the value and onChange props or we can leave them both out.