React Playground

App.jsx

index.jsx

import React, {useState} from 'react';
import Input from './Input.jsx'
export function App() {
  const [data, setData] = useState({
    item: {
      value: "Hello world",
      id: "some-random-id",
    },
  });
  return (
    <>
      {data ? <Input item={data.item} /> : 'Look in console'}
      <button onClick={() => setData(null)}>
        Send input to server
      </button>
    </>
  )
}

Input.jsx

export default function Input({ item }) {
  async function onBlur() {
    const itemref = item;
    // Mimicking a fast request-response trip to a server for saving the input
    await new Promise(resolve => setTimeout(resolve, 100)); // It seems that 100ms is the treshold
    // Referencing item from props does not work, cannot be used for e.g. tracking or other logic
    console.log(itemref.id, itemref.value);
  }
  return <input type='text' defaultValue={item.value} onBlur={onBlur} />;
}

Web View