function App (){
  const [ arrayData, setArrayData ] = React.useState([
    {
      id: '',
      name: 'Ray',
      price: 80,
    },
    {
      name: 'John',
      price: 90,
    },
    {
      name: 'Mary',
      price: 100,
    }
  ]);

  function reverseData () {
    setArrayData([ ...arrayData.reverse() ])
  }

  return (
    <div>
      <ul>
        { arrayData.map((item, index) => (
          <li key={ `${item.name}${index} `}>{ item.name } - <input type="text"/></li>
        )) }
      </ul>
      <button type="button" onClick={ reverseData }>反轉</button>
    </div>
  )
}

const app = document.querySelector('#app');
const root = ReactDOM.createRoot(app);
root.render(<App />);