Category: React

To fix React-router URLs don’t work when refreshing or writing manually, we should fix our server config.

For instance, we write

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

in the .htaccess file if we’re using Apache.

The file redirects all requests to index.html of the React app so that React Router can be used to render the routes instead of the server.

To force a React component to rerender without calling setState, we can keep a state with useReducer.

For instance, we write

const [, forceUpdate] = useReducer((x) => x + 1, 0);

const handleClick = () => {
  forceUpdate();
};

to call the useReducer hook to return an array withe forceUpdate function.

We call useReducer with a function toi return a new state each time forceUpdate is called.

Then we call forceUpdate to update the state returned by useReducer to trigger re-rendering.

Sometimes, we want to conditionally add attributes to React components.

In this article, we’ll look at how to conditionally add attributes to React components.

How to conditionally add attributes to React components?

To conditionally add attributes to React components, we can pass them in as props,

For instance, we write

const InputComponent = () => {
  const required = true;
  const disabled = false;

  return <input type="text" disabled={disabled} required={required} />;
};

to set the disabled attribute by setting the disabled prop to disabled.

And we set the required attribute by setting the required prop to required.

Conclusion

To conditionally add attributes to React components, we can pass them in as props,

Sometimes, we want to set focus on an input field after rendering with Reatct.

In this article, we’ll look at how to set focus on an input field after rendering with Reatct.

How to set focus on an input field after rendering with Reatct?

To set focus on an input field after rendering with React, we assign a ref to the input and then call focus on the ref’s value.

For instance, we write

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

const MyForm = () => {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, []);

  return (
    <div>
      <input ref={textInput} />
    </div>
  );
};

to define the MyForm component.

In it, we call useRef to create the textInput ref.

And then we assign that as the value of the ref prop of the input.

Then we call textInput.current.focus(); in the useEffect hook callback to focus on the input.

The callback is called when the component is mounted since the 2nd argument is an empty array.

Conclusion

To set focus on an input field after rendering with React, we assign a ref to the input and then call focus on the ref’s value.

Sometimes, we want to fix onClick can’t pass value to method with React.

In this article, we’ll look at how to fix onClick can’t pass value to method with React.

How to fix onClick can’t pass value to method with React?

To fix onClick can’t pass value to method with React, we set the onClick prop to a function that calls a function that takes the value we want.

For instance, we write

<th value={column} onClick={() => handleSort(column)}>
  {column}
</th>

to set the onClick prop to a function that calls handleSort with the column variable.

The function is called when we click on the th element.

Conclusion

To fix onClick can’t pass value to method with React, we set the onClick prop to a function that calls a function that takes the value we want.