Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to avoid extra wrapping div in React?

Labrador retriever puppy walking on green grass

Sometimes, we want to avoid extra wrapping div in React.

In this article, we’ll look at how to avoid extra wrapping div in React.

How to avoid extra wrapping div in React?

To avoid extra wrapping div in React, we can use a fragment.

For instance, we write

const Comp = () => {
  //...
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
};

to wrap the components ChildA, ChildB and ChildC with React.Fragment to render ChildA, ChildB and ChildC together without wrapping them with an extra container element.

Conclusion

To avoid extra wrapping div in React, we can use a fragment.

Categories
JavaScript Answers

How to fix Home does not contain an export named Home error with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix Home does not contain an export named Home error with JavaScript.

In this article, we’ll look at how to fix Home does not contain an export named Home error with JavaScript.

How to fix Home does not contain an export named Home error with JavaScript?

To fix Home does not contain an export named Home error with JavaScript, we should make sure that we import Home correctly.

For instance, if we have a default export

export default Home;

Then we import it by writing

import Home from './layouts/Home';

And if we have a named import like

export { Home };

Then we import it by writing

import { Home } from './layouts/Home';

Conclusion

To fix Home does not contain an export named Home error with JavaScript, we should make sure that we import Home correctly.

Categories
JavaScript Answers

How to concatenate properties from multiple JavaScript objects?

Labrador retriever puppy walking on green grass

Sometimes, we want to concatenate properties from multiple JavaScript objects.

In this article, we’ll look at how to concatenate properties from multiple JavaScript objects.

How to concatenate properties from multiple JavaScript objects?

To concatenate properties from multiple JavaScript objects, we can use the object spread syntax.

For instance, we write

const obj1 = { 1: 11, 2: 22 };
const obj2 = { 3: 33, 4: 44 };
const obj3 = { ...obj1, ...obj2 };

to put the properties of obj1 and obj2 into a new object with the spread operator and assign the new object to obj3.

Conclusion

To concatenate properties from multiple JavaScript objects, we can use the object spread syntax.

Categories
JavaScript Answers

How to open a download window without navigating away from the page with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to open a download window without navigating away from the page with JavaScript.

In this article, we’ll look at how to open a download window without navigating away from the page with JavaScript.

How to open a download window without navigating away from the page with JavaScript?

To open a download window without navigating away from the page with JavaScript, we create an anchor element and then click it.

For instance, we write

const filePath = "host/path/file.ext";
const a = document.createElement("a");
a.href = filePath;
a.download = filePath.substr(filePath.lastIndexOf("/") + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

to call createElement to create an a element.

Then we set its href property to the URL of the file to download.

The download property is set to the file name of the downloaded file.

Then we call click to download the file.

Conclusion

To open a download window without navigating away from the page with JavaScript, we create an anchor element and then click it.

Categories
JavaScript Answers

How to loop through properties in a JavaScript object with Lodash?

Labrador retriever puppy walking on green grass

Sometimes, we want to loop through properties in a JavaScript object with Lodash.

In this article, we’ll look at how to loop through properties in a JavaScript object with Lodash.

How to loop through properties in a JavaScript object with Lodash?

To loop through properties in a JavaScript object with Lodash, we use the forOwn function.

For instance, we write

_.forOwn(obj, (value, key) => {});

to call forOwn with obj and a callback that has the value and key of each obj property as parameters.

forOwn only loops through non-inherited properties in obj.

Conclusion

To loop through properties in a JavaScript object with Lodash, we use the forOwn function.