Category: React Answers

To open PDF when clicking on a link with React, we can import the PDF file as a module and set that as the value of the href prop.

For instance, we write:

import React from "react";
import pdf from "./dummy.pdf";

export default function App() {
  return (
    <div>
      <a href={pdf} target="_blank" rel="noreferrer">
        Download Pdf
      </a>
    </div>
  );
}

We set the href prop of the a element to pdf which we imported with import.

Then we set the target prop to '_blank' to open the PDF in a new window.

We also have rel="noreferrer" to make sure that no referrer info is leaked when the link is clicked.

Sometimes, we want to cause anchors to do nothing on click in React.

In this article, we’ll look at how to cause anchors to do nothing on click in React.

How to cause anchors to do nothing on click in React?

To cause anchors to do nothing on click in React, we can call e.preventDefault in the click handler function of the anchor.

For instance, we write:

import React from "react";

export default function App() {
  const onClick = (e) => {
    e.preventDefault();
    console.log("on click");
  };

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

We have the onClick function that calls e.preventDefault to prevent the default action of going to the URL specified by the href attribute of the anchor.

Then we set the onClick prop of the anchor to the onClick function to use that as the click handler.

Now we should see 'on click' logged when we click on the anchor.

Conclusion

To cause anchors to do nothing on click in React, we can call e.preventDefault in the click handler function of the anchor.

Sometimes, we want to add space between two elements on the same line with React.

In this article, we’ll look at how to add space between two elements on the same line with React.

How to add space between two elements on the same line with React?

To add space between two elements on the same line with React, we can use flexbox.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div style={{ display: "flex", justifyContent: "space-between" }}>
      <div>foo</div>
      <div>bar</div>
    </div>
  );
}

We set the style prop of the outer div to { display: "flex", justifyContent: "space-between" } to make the div have a flexbox layout.

Then we can set justifyContent to "space-between" to display the 2 inner divs at the 2 ends of the outer div.

Conclusion

To add space between two elements on the same line with React, we can use flexbox.

Sometimes, we want to update a React input text field with the value on onBlur event.

In this article, we’ll look at how to update a React input text field with the value on onBlur event.

How to update a React input text field with the value on onBlur event?

To update a React input text field with the value on onBlur event, we can set the onBlur prop of the input to a function that does something with the input value.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const updateInput = () => {
    console.log(inputValue);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleChange} onBlur={updateInput} />
    </div>
  );
}

We defined the inputValue state with the useState hook.

Then we set the value prop of the input to inputValue.

And we set the onChange prop to handleChange to set inputValue to the value of the input with setInputValue.

Next, we set the onBlur prop to updateInput to log the value of inputValue when we move focus away from the input.

Conclusion

To update a React input text field with the value on onBlur event, we can set the onBlur prop of the input to a function that does something with the input value.

Sometimes, we want to store screen size info on window resize with React and Redux.

In this article, we’ll look at how to store screen size info on window resize with React and Redux.

How to store screen size info on window resize with React and Redux?

To store screen size info on window resize with React and Redux, we can listen for the window resize event with addEventListener.

Then we store the screen size in the store.

For instance, we write:

import React, { useEffect } from "react";
import { Provider, useDispatch, useSelector } from "react-redux";
import { combineReducers, createStore } from "redux";

const ScreenReducer = (state = {}, action) => {
  switch (action.type) {
    case "SCREEN_RESIZE":
      const { screenWidth } = action;
      return { ...state, screenWidth };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  screen: ScreenReducer
});

const store = createStore(rootReducer);

const ScreenSize = () => {
  const { screenWidth } = useSelector((s) => s.screen);
  const dispatch = useDispatch();

  useEffect(() => {
    const onResize = () => {
      dispatch({ type: "SCREEN_RESIZE", screenWidth: window.innerWidth });
    };

    window.addEventListener("resize", onResize);

    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, [dispatch]);

  return (
    <div>
      <span>{screenWidth}</span>
    </div>
  );
};

export default function App() {
  return (
    <Provider store={store}>
      <ScreenSize />
    </Provider>
  );
}

We have the ScreenReducer reducer function that returns the state + 1 if the 'ADD' action type is dispatched.

We get the screenWidth from the action and we return it in the state.

Then we call combineReducers with an object with the count as the state property name and the ScreenReducer as its reducer.

Next, we call createStore with rootReducer to create the store from the root reducer.

Then we create the ScreenSize component that calls the useSelector hook to return the the value of the count state.

And we call the useDispatch hook to return the dispatch function that we can use to dispatch actions.

We watch for screen size changes by using the useEffect hook with a callback that calls window.addEventListener with the onResize function.

In onResize, we call dispatch with an object that has the type and the screenWidth properties.

window.innerWidth gets the screen’s width.

Also, we return a function that calls window.removeEventListener to remove the resize listener when we unmount the component.

Finally, in App, we wrap Provider around Counter so useSelector and useDispatch can be used in ScreenSize.

And we set the store prop to the store so we can dispatch actions and get states from the store.

Conclusion

To store screen size info on window resize with React and Redux, we can listen for the window resize event with addEventListener.

Then we store the screen size in the store.