Category: React Answers

Sometimes, we want to make view 80% width of parent in React Native.

In this article, we’ll look at how to make view 80% width of parent in React Native.

How to make view 80% width of parent in React Native?

To make view 80% width of parent in React Native, we can calculate the width with JavaScript.

For instance, we write

import React, { useEffect, useState } from "react";
import { Dimensions, View, Text, StyleSheet } from "react-native";

const Comp = () => {
  const [screenData, setScreenData] = useState(Dimensions.get("window").width);

  useEffect(() => {
    const onChange = () => {
      setScreenData(Dimensions.get("window").width);
    };
    Dimensions.addEventListener("change", onChange);

    return () => {
      Dimensions.removeEventListener("change", onChange);
    };
  });

  return (
    <View style={{ width: screenData * 0.8 }]}>
      <Text>hello</Text>
    </View>
  );
};

export default Comp;

to watch for screen dimensions change by adding the change event listener to the Dimensions object.

We call onChange with the change event is emitted by Dimensions.

In onChange, we call setScreenData set the screenData state to the screen’s width.

And we set the width of the View to screenData * 0.8.

Sometimes, we want to disable button in React.

In this article, we’ll look at how to disable button in React.

How to disable button in React?

To disable button in React, we can set the disabled prop.

For instance, we write

<button disabled={value}>button</button>;

to set the disabled prop to the value state.

Conclusion

To disable button in React, we can set the disabled prop.

Sometimes, we want to fix onClick being called on render with React.

In this article, we’ll look at how to fix onClick being called on render with React.

How to fix onClick being called on render with React?

To fix onClick being called on render with React, we can set the onClick prop to a function reference.

For instance, we write

const Square = ({ value }) => {
  return (
    <button className="square" onClick={() => alert("click")}>
      {value}
    </button>
  );
};

to set the onClick prop to a function that shows an alert box.

The function is called only when we click the button since we pass in the function’s reference rather than its returned value.

Conclusion

To fix onClick being called on render with React, we can set the onClick prop to a function reference.

Sometimes, we want to add onClick event handler with React.

In this article, we’ll look at how to add onClick event handler with React.

How to add onClick event handler with React?

To add onClick event handler with React, we set the onClick prop of an element to a function that runs when we click on the element.

For instance, we write

const ActionLink = () => {
  const handleClick = (e) => {
    e.preventDefault();
    console.log("The link was clicked.");
  };

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
};

to set the onClick prop of the a element to the handleClick function.

In handleClick, we call e.preventDefault to prevent the default action of navigating to the URL set as the value of the href attribute.

Then we call console.log to log some text.

Conclusion

To add onClick event handler with React, we set the onClick prop of an element to a function that runs when we click on the element.

Sometimes, we want to use setInterval in a React app.

In this article, we’ll look at how to use setInterval in a React app.

How to use setInterval in a React app?

To use setInterval in a React app, we call setInterval in the useEffect hook callback.

For instance, we write

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const Clock = () => {
  const [currentCount, setCount] = useState(10);
  const timer = () => setCount(currentCount - 1);

  useEffect(() => {
    if (currentCount <= 0) {
      return;
    }
    const id = setInterval(timer, 1000);
    return () => clearInterval(id);
  }, [currentCount]);

  return <div>{currentCount}</div>;
};

const App = () => <Clock />;

to call useEffect with a callback that calls setInterval to run the timer function every 1000 milliseconds.

We return a function that calls clearInterval with the timer id to clear the timer when currentCount changes.

Conclusion

To use setInterval in a React app, we call setInterval in the useEffect hook callback.