Author: John Au-Yeung

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

Categories
JavaScript Answers

How to move element in the DOM in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to move element in the DOM in JavaScript.

In this article, we’ll look at how to move element in the DOM in JavaScript.

How to move element in the DOM in JavaScript?

To move element in the DOM in JavaScript, we can use the before and after methods.

For instance, we write

const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

div2.after(div1);
div2.before(div3);

to select 3 divs with getElementById.

Then we call div2.after with div1 to insert div1 after div2.

And we call div2.before with div3 to insert div3 before div2.

Conclusion

To move element in the DOM in JavaScript, we can use the before and after methods.

Categories
React Native Answers

How to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native.

In this article, we’ll look at how to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native.

How to fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native?

To fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native, we should have a single child component in the TouchableHighlight component.

For instance, we write

const Comnp = () => {
  //...
  const { height, width } = Dimensions.get("window");
  return (
    <View style={styles.container}>
      <Image
        style={{
          height,
          width,
        }}
        source={require("image!foo")}
        resizeMode="cover"
      />
      <TouchableHighlight style={styles.button}>
        <Text> highlight text</Text>
      </TouchableHighlight>
    </View>
  );
};

to add the Text component into the TouchableHighlight component.

We keep the Image outside the TouchableHighlight so we only have a single child component in the TouchableHighlight component.

Conclusion

To fix ‘React.Children.only expected to receive a single React element child’ error when putting Image and TouchableHighlight in a View with React Native, we should have a single child component in the TouchableHighlight component.

Categories
JavaScript Answers

How to query Firestore database for document ID with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to query Firestore database for document ID with JavaScript.

In this article, we’ll look at how to query Firestore database for document ID with JavaScript.

How to query Firestore database for document ID with JavaScript?

To query Firestore database for document ID with JavaScript, we call the doc method.

For instance, we write

const book = db.collection("books").doc("fK3ddutEpD2qQqRMXNW5").get();

to get the books collection with

db.collection("books")

Then we call doc to get the entry from the books collection with ID 'fK3ddutEpD2qQqRMXNW5'.

Finally, we call get to return the object with the given ID.

Conclusion

To query Firestore database for document ID with JavaScript, we call the doc method.

Categories
JavaScript Answers

How to set img src with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to set img src with JavaScript.

In this article, we’ll look at how to set img src with JavaScript.

How to set img src with JavaScript?

To set img src with JavaScript, we set the src property of the img element.

For instance, we write

const image = document.createElement("img");
image.src = "https://picsum.photos/200/300";

to call createElement to create an img element.

Then we set its src attribute by setting the src property to the image URL.

Conclusion

To set img src with JavaScript, we set the src property of the img element.

Categories
JavaScript Answers

How to fix UTC gives wrong date with moment.js and JavaScript?

Labrador retriever puppy walking on green grass

To fix UTC gives wrong date with moment.js and JavaScript, we should add the time zone to the datetime string we’re parsing into a moment object.

For instance, we write

const datetime = moment(new Date("07-18-2022 UTC"))
  .utc()
  .format("YYYY-MM-DD HH:mm");

to call moment with the new Date("07-18-2022 UTC") date, which we specified to be UTC.

Then we call utc to return a UTC moment.

Next, we call format to return a datetime string in specified format.