Category: React

Sometimes, we want to fix ‘Expected corresponding JSX closing tag for input’ error with React.

In this article, we’ll look at how to fix ‘Expected corresponding JSX closing tag for input’ error with React.

How to fix ‘Expected corresponding JSX closing tag for input’ error with React?

To fix ‘Expected corresponding JSX closing tag for input’ error with React, we should close the tags in our element.

For instance, we write

<input type="text" class="validate" />

to add a slash to close the input tag in our JSX code.

Then the error will go away.

Conclusion

To fix ‘Expected corresponding JSX closing tag for input’ error with React, we should close the tags in our element.

Sometimes, we want to render an array of objects in React.

In this article, we’ll look at how to render an array of objects in React.

How to render an array of objects in React?

To render an array of objects in React, we can use the array map method.

For instance, we write

const Item = (props) => {
  return <li>{props.message}</li>;
};

const TodoList = () => {
  const todos = ["foo", "bar", "baz"];

  return (
    <ul>
      {todos.map((message) => (
        <Item key={message} message={message} />
      ))}
    </ul>
  );
};

to call todos.map with a callback toi render the Item component with the message value.

We set the key prop to a unique value for each entry so that React can identify each item being rendered.

Conclusion

To render an array of objects in React, we can use the array map method.

Sometimes, we want to put an icon inside a TextInput in React Native.

In this article, we’ll look at how to put an icon inside a TextInput in React Native.

How to put an icon inside a TextInput in React Native?

To put an icon inside a TextInput in React Native, we can use the TextInput component in the react-native-paper module.

We import it with

import { TextInput } from "react-native-paper";

Then we add the TextInput with the icon with

<TextInput
  label="Password"
  secureTextEntry
  right={<TextInput.Icon name="eye" />}
/>;

We set the right prop to the Icon to show the eye icon on the right of the input.

Conclusion

To put an icon inside a TextInput in React Native, we can use the TextInput component in the react-native-paper module.

Sometimes, we want to check if the React component is unmounted.

In this article, we’ll look at how to check if the React component is unmounted.

How to check if the React component is unmounted?

To check if the React component is unmounted, we can use a ref to keep track of the mounted value.

For instance, we write

function MyComponent(props) {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  return <>...</>;
}

export default MyComponent;

to define the isMounted ref with

const isMounted = useRef(false);

Then we add

isMounted.current = true;

in the useEffect to set isMounted.current to true when it’s mounted.

We call useEffect with an empty array so the callback only runs when it’s mounted.

And we return a function that’s called when it’s unmounted in the useEffect callback.

So we set isMounted.current to false there.

Conclusion

To check if the React component is unmounted, we can use a ref to keep track of the mounted value.

Sometimes, we want to maintain state after a page refresh in React.

In this article, we’ll look at how to maintain state after a page refresh in React.

How to maintain state after a page refresh in React?

To maintain state after a page refresh in React, we can save the state in session storage.

For instance, we write

const Comp = () => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    setCount(JSON.parse(window.sessionStorage.getItem("count")));
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem("count", count);
  }, [count]);

  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

to save the latest value of count to session storage with sessionStorage.setItem.

We watch the value of count and call sessionStorage.setItem whenever it changes with the useEffect hook.

To get the item after it refreshes, we call sessionStorage.getItem in the first useEffect callback, which is called with an empty array so it’s run only when the component first mounts.

Conclusion

To maintain state after a page refresh in React, we can save the state in session storage.