Full Stack Development

useId

by Tomas Trescak t.trescak@westernsydney.edu.au

useId

/

The Problem

      import React, { useId, render } from "react";

const ItemForm = () => {
  return (
    <div>
      <label htmlFor="item">Item: </label>
      <input id="item" type="text" />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Multiple Item Forms</h1>
      <ItemForm />
      <ItemForm />
      <ItemForm />
    </div>
  );
};

render(<App />)

useId

/

The Problem

      import React, { useId, render } from "react";

const ItemForm = () => {
  const id = useId();

  return (
    <div>
      <label htmlFor={`${id}-item`}>Item</label>
      <input id={`${id}-item`} type="text" />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Multiple Item Forms</h1>
      <ItemForm />
      <ItemForm />
      <ItemForm />
    </div>
  );
};

render(<App />)