Category: React

Sometimes, we want to use anchors with React Router.

In this article, we’ll look at how to use anchors with React Router.

How to use anchors with React Router?

To use anchors with React Router, we can use the react-router-hash-link package.

We install it by running

npm install --save react-router-hash-link

Then we use it by writing

import { HashLink as Link } from "react-router-hash-link";

<Link to="home-page#section-three">Section three</Link>;

to use the HashLink component with the to prop set to a URL with the anchor.

Conclusion

To use anchors with React Router, we can use the react-router-hash-link package.

Sometimes, we want to share states between components using the useState hook in React.

In this article, we’ll look at how to share states between components using the useState hook in React.

How to share states between components using the useState hook in React?

To share states between components using the useState hook in React, we can lift the state up to the component that contains both components.

For instance, we write

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

  return (
    <>
      <DescendantA count={count} onCountChange={setCount} />
      <DescendantB count={count} onCountChange={setCount} />
    </>
  );
};

to add the count state and set that as the value of the count prop of the DescendantA and DescendantB components.

Conclusion

To share states between components using the useState hook in React, we can lift the state up to the component that contains both components.

Sometimes, we want to get data from the Material UI TextField component.

In this article, we’ll look at how to get data from the Material UI TextField component.

How to get data from the Material UI TextField component?

To get data from the Material UI TextField component, we can get the input value from the onChange callback.

For instance, we write

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

import TextField from "@material-ui/core/TextField";

const Input = () => {
  const [textInput, setTextInput] = useState("");

  const handleTextInputChange = (event) => {
    setTextInput(event.target.value);
  };

  return (
    <TextField
      label="Text Input"
      value={textInput}
      onChange={handleTextInputChange}
    />
  );
};

export default Input;

to add a TextField with the onChange prop set to the handleTextInputChange function.

In it, we call setTextInput with the event.target.value property which has the input value.

Then we get the input value from the textInput state, which we set as the value of the value prop.

Conclusion

To get data from the Material UI TextField component, we can get the input value from the onChange callback.

Sometimes, we want to update states onChange in an array of objects in React Hooks.

In this article, we’ll look at how to update states onChange in an array of objects in React Hooks.

How to update states onChange in an array of objects in React Hooks?

To update states onChange in an array of objects in React Hooks, we can return a new array with the new input value.

For instance, we write

const Comp = () => {
  const [data, setData] = useState([
    {
      id: 1,
      name: "john",
      gender: "m",
    },
    {
      id: 2,
      name: "mary",
      gender: "f",
    },
  ]);

  const updateFieldChanged = (index) => (e) => {
    const newArr = data.map((item, i) => {
      if (index === i) {
        return { ...item, [e.target.name]: e.target.value };
      } else {
        return item;
      }
    });
    setData(newArr);
  };

  return (
    <>
      {data.map((datum, index) => {
        <li key={datum.name}>
          <input
            type="text"
            name="name"
            value={datum.name}
            onChange={updateFieldChanged(index)}
          />
        </li>;
      })}
    </>
  );
};

to define the data state with useState.

Then we define the updateFieldChanged function that calls data.map with a callback that checks if index is i.

If it is, then we return a new object with the existing properties of item.

And we add the [name] property and set it to the e.target.value input value.

Then we call setData with newArr to update the state to the array returned by map.

Finally, we render the li elements with the inputs inside.

And we set the onChange prop to the function returned by updateFieldChanged called with index.

Conclusion

To update states onChange in an array of objects in React Hooks, we can return a new array with the new input value.

Sometimes, we want to use ES6 import alias syntax for React components.

In this article, we’ll look at how to use ES6 import alias syntax for React components.

How to use ES6 import alias syntax for React components?

To use ES6 import alias syntax for React components, we can use the as keyword.

For instance, we write

import { default as StyledLibrary } from "component-library";

to import a default export from the component-library module.

We add a default export with

export default StyledLibrary;

Conclusion

To use ES6 import alias syntax for React components, we can use the as keyword.