<div id="app"></div>
const DataContext = React.createContext();

const Button = () => {
  const data = React.useContext(DataContext);
  
  const pay = () => {
    window.alert(`你已成功購買 ${data.title}`);
  }

  return (
    <button type="button" onClick={ pay }>點我購買({ data.price } $)</button>
  )
}

const Card = ({ data }) => {
  return (
    <div>
      <h5>產品名稱:{ data.title }</h5>
      <Button />
    </div>
  )
}


const Products = () => {
  const [ data, setData ] = React.useState({
    title: 'PlayStation5',
    price: 75000,
  });

  return (
    <DataContext.Provider value={ data }>
      <ul>
        <li key={ data.title }>
          <Card data={ data } />
        </li>
      </ul>
    </DataContext.Provider>
  )
}

const App = () => {
  return (
    <div>
      <Products />
    </div>
  )
}

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

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js
  2. https://unpkg.com/react@18/umd/react.development.js
  3. https://unpkg.com/react-dom@18/umd/react-dom.development.js
  4. https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js