Category: React Answers

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.

Sometimes, we want to define components with dynamic names with React and JSX.

In this article, we’ll look at how to define components with dynamic names with React and JSX.

Define Components with Dynamic Names with React and JSX

To define components with dynamic names with React and JSX, we can put the components in an object.

Then we can access the components with the key from the object.

For instance, we write:

import React from "react";

const PhotoStory = () => <div>photo</div>;

const VideoStory = () => <div>photo</div>;

const components = {
  photo: PhotoStory,
  video: VideoStory
};

const Story = ({ storyType }) => {
  const SpecificStory = components[storyType];
  return <SpecificStory />;
};

export default function App() {
  return <Story storyType="photo" />;
}

to create components object with the PhotoStory and VideoStory components as its property values.

Then in the Story component, we can get the component form the components object with the storyType prop and assign it to SpecificStory.

Finally, we use the Story component in App with the storyType set to 'photo' so we can render the PhotoStory component.

So we see ‘photo’ rendered on the screen.

Conclusion

To define components with dynamic names with React and JSX, we can put the components in an object.

Then we can access the components with the key from the object.

Sometimes, we may run into the ‘No restricted globals’ ESLint Error when developing a React app.

In this article, we’ll look at how to fix the ‘No restricted globals’ ESLint Error when developing a React app.

Fix the ‘No Restricted globals’ ESLint Error When Developing a React App

To fix the ‘No restricted globals’ ESLint Error when developing a React app, we can add the // eslint-disable-next-line no-restricted-globals comment before the code that is causing the error.

But the better solution is to put window before the variable that causes the error.

For instance, instead of writing location, we write window.location.

Conclusion

To fix the ‘No restricted globals’ ESLint Error when developing a React app, we can add the // eslint-disable-next-line no-restricted-globals comment before the code that is causing the error.

But the better solution is to put window before the variable that causes the error.