Category: React

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 may run into the ‘Await is a reserved word error inside async function’ error when developing a React app.

In this article, we’ll look at how to fix the ‘Await is a reserved word error inside async function’ error when developing a React app.

Fix the ‘Await is a reserved word error inside async function’ Error When Developing a React App

To fix the ‘Await is a reserved word error inside async function’ error when developing a React app, we should make sure we make any function that uses the await keyword an async function.

For instance, instead of writing:

export const sendVerificationEmail = async () =>
  (dispatch) => {
    try {
      dispatch({ type: EMAIL_FETCHING, payload: true });
      await Auth.sendEmailVerification();
      dispatch({ type: EMAIL_FETCHING, payload: false }))
    } catch (error) {
      dispatch({ type: EMAIL_FETCHING, payload: false });
      throw new Error(error);
    }
  };

We write:

export const sendVerificationEmail = async () =>
  async (dispatch) => {
    try {
      dispatch({ type: EMAIL_FETCHING, payload: true });
      await Auth.sendEmailVerification();
      dispatch({ type: EMAIL_FETCHING, payload: false }))
    } catch (error) {
      dispatch({ type: EMAIL_FETCHING, payload: false });
      throw new Error(error);
    }
  };

We add the async keyword to the function we returned in the sendVerificationEmail function.

Conclusion

To fix the ‘Await is a reserved word error inside async function’ error when developing a React app, we should make sure we make any function that uses the await keyword an async function.

Sometimes, we may run into the ‘Warning: Unknown DOM property class. Did you mean className?’ error when developing a React app.

In this article, we’ll look at how to fix the ‘Warning: Unknown DOM property class. Did you mean className?’ error when developing a React app.

Fix the ‘Warning: Unknown DOM property class. Did you mean className?’ Error When Developing a React App

To fix the ‘Warning: Unknown DOM property class. Did you mean className?’ error when developing a React app, we should make sure we replace the class attribute in our components with className.

For instance, we write:

import React from "react";

export default function App() {
  return <div className="hello">hello world</div>;
}

to assign the hello class to the div instead of:

import React from "react";

export default function App() {
  return <div class="hello">hello world</div>;
}

Conclusion

To fix the ‘Warning: Unknown DOM property class. Did you mean className?’ error when developing a React app, we should make sure we replace the class attribute in our components with className.

Sometimes, we want to fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app.

In this article, we’ll look at how to fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app.

Fix the ‘Uncaught TypeError: props.data.map is not a function’ Error When Developing a React App

To fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app, we should make sure props.data.map is an array before calling map.

For instance, we can write:

import React from "react";

const Foo = (props) => {
  return (
    <div>
      {Array.isArray(props.data) && props.data.map((d) => <p key={d}>{d}</p>)}
    </div>
  );
};

export default function App() {
  return <Foo data={[1, 2, 3]} />;
}

to create the Foo component that uses the Array.isArray method to check if props.data is an array before calling the map method on it.

This way, map won’t be called is props.data isn’t an array.

Conclusion

To fix the ‘Uncaught TypeError: props.data.map is not a function’ Error when developing a React app, we should make sure props.data.map is an array before calling map.

Sometimes, we want to listen for changes in a contentEditable element in React.

In this article, we’ll look at how to listen for changes in a contentEditable element in React.

Listen for Changes in a contentEditable Element in React

To listen for changes in a contentEditable element in React, we can listen to the input event on the div.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div
      contentEditable
      onInput={(e) => console.log(e.currentTarget.textContent)}
    >
      Text inside div
    </div>
  );
}

to add a div with the contentEditable attribute set to true.

Then we add the onInput prop and pass in a function to log the content of the div, which is stored in the e.currentTarget.textContent property.

Now when we change the content of the div by typing, we see the latest div content logged in the console.

Conclusion

To listen for changes in a contentEditable element in React, we can listen to the input event on the div.