Category: React Answers

Sometimes, we want to set initial React state from API data.

In this article, we’ll look at how to set initial React state from API data.

Set Initial React State from API Data

To set initial React state from API data, we can make the request in the useEffect callback.

And we pass in an empty array as the 2nd argument to only make it run when the component mounts.

For instance, we write:

import React, { useEffect, useState } from "react";

export default function App() {
  const [ans, setAns] = useState();

  const getAns = async () => {
    const res = await fetch("https://yesno.wtf/api");
    const data = await res.json();
    setAns(data.answer);
  };

  useEffect(() => {
    getAns();
  }, []);

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

We have the getAns function that makes a GET request with fetch.

Then we call res.json to return a promise with the response JSON data.

Next, we call setAns to set the value of ans.

We call getAns in the useEffect callback to run it.

And the callback only runs when the component mounts since we pass in an empty array into useEffect.

Conclusion

To set initial React state from API data, we can make the request in the useEffect callback.

And we pass in an empty array as the 2nd argument to only make it run when the component mounts.

Sometimes, we want to add a linear-gradient background in a React component.

In this article, we’ll look at how to add a linear-gradient background in a React component.

Add a linear-gradient Background in a React Component

To add a linear-gradient background in a React component, we can put the linear-gradient value in the style prop object.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <div style={{ background: "linear-gradient(#e66465, #9198e5)" }}>
        hello world
      </div>
    </div>
  );
}

to set the background property to "linear-gradient(#e66465, #9198e5)".

Now we should see the linear gradient background on the div.

Conclusion

To add a linear-gradient background in a React component, we can put the linear-gradient value in the style prop object.

Sometimes, we want to add a hover button in React.

In this article, we’ll look at how to add a hover button in React.

Add a Hover Button in React

To add a hover button in React, we can add a button that has the onMouseOver and onMouseOut props set to functions that run when we move our mouse over the button and move our mouse outside of it respectively.

In the functions, we set a state to track whether we hovered over the button or not.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [hover, setHover] = useState();

  const handleMouseIn = () => {
    setHover(true);
  };

  const handleMouseOut = () => {
    setHover(false);
  };

  return (
    <div>
      <button onMouseOver={handleMouseIn} onMouseOut={handleMouseOut}>
        {hover ? "foo" : "bar"}
      </button>
    </div>
  );
}

We have the hover state to track whether we hovered over the button or not.

And we set it to true in handleMouseIn and false in handleMouseOut.

We set onMouseOver to handleMouseIn and onMouseOut to handleMouseOut.

This way, hover is true when we hovered over the button and false otherwise.

In the button, we show ‘foo’ when hover is true and ‘bar’ otherwise.

Now when we hover over the button, we see ‘foo’ and we see ‘bar’ otherwise.

Conclusion

To add a hover button in React, we can add a button that has the onMouseOver and onMouseOut props set to functions that run when we move our mouse over the button and move our mouse outside of it respectively.

In the functions, we set a state to track whether we hovered over the button or not.

Sometimes, we want to add a tooltip div with React.

In this article, we’ll look at how to add a tooltip div with React.

Add a Tooltip div with React

To add a tooltip div with React, we can show or hide an element depending on the hover state of another element.

To add it, we write:

import React, { useState } from "react";

export default function App() {
  const [hover, setHover] = useState();

  const handleMouseIn = () => {
    setHover(true);
  };

  const handleMouseOut = () => {
    setHover(false);
  };

  return (
    <div>
      <div onMouseOver={handleMouseIn} onMouseOut={handleMouseOut}>
        hover me
      </div>
      <div>
        <div
          style={{
            display: hover ? "block" : "none"
          }}
        >
          tooltip
        </div>
      </div>
    </div>
  );
}

We defined the hover state with the useState hook.

And we use the setHover function to set the hover state to true and false in the handleMouseIn and handleMouseOut functions respectively.

We set handleMouseIn function as the onMouseOver handler and we set handleMouseOut as the onMouseOut handler.

This way we set hover to true to show the tooltip div when we hover over the hover me div or hide it when we move our mouse outside of the div.

The tooltip div’s display CSS property is controlled by hover‘s value.

If it’s true, we set it to 'block' to show it.

Otherwise, we set it to 'none' to hide it.

Conclusion

To add a tooltip div with React, we can show or hide an element depending on the hover state of another element.

Sometimes, we want to prevent scrolling using CSS on React rendered components.

In this article, we’ll look at how to prevent scrolling using CSS on React rendered components.

Prevent Scrolling Using CSS on React Rendered Components

To prevent scrolling using CSS on React rendered components, we can set the overflow CSS property to hidden with JavaScript.

For instance, we write:

import React, { useEffect } from "react";

export default function App() {
  useEffect(() => {
    document.body.style.overflow = "hidden";
  }, []);

  return <div>hello world</div>;
}

to set the overflow CSS of the body element to hidden when the component mounts with:

document.body.style.overflow = "hidden";

The useEffect callback only runs when the component mounts since we passed in an empty array as the 2nd argument of useEffect.

Conclusion

To prevent scrolling using CSS on React rendered components, we can set the overflow CSS property to hidden with JavaScript.