React.js 在迭代时将列表项传递给数据库

Question

I have a list of items and want to iterate over them, create a div block with a button and if the user clicks on the button send this data to a function and then database. However with my code, instead of the item data, I only send undefined.

import React, {useState, useEffect} from 'react';
import './App.css';
import allItemsList from './allItemsList.json'

function App() {
  const itemsList = allItemsList[0].itemslist
  
  function addDemoButton (currentItem) {

    ///how do i pass the currentItem variable here to this function?

  }

  
  return (
    <div className="App">
      <div className="itembox">
      {itemsList.map((currentItem ) => (
                <div >
                  <h6>{`${currentItem}` }</h6>
                  <p>some information here</p>
                  <button onClick={(currentItem) => addDemoButton()}>Free Demo</button>
                </div>
            ))}
      </div>
    </div>
  );
}

this is the allitemslist.json that i import as allItemsList:

[
  {
    "itemslist": ["item1", "item2", "item3"]
  }
]

Answer 1

Just add it in addDemoButton as parameter of method

return (
    <div className="App">
      <div className="itembox">
      {itemsList.map((currentItem ) => (
                <div >
                  <h6>{`${currentItem}` }</h6>
                  <p>some information here</p>
                  <button onClick={() => addDemoButton(currentItem)}>Free Demo</button>
                </div>
            ))}
      </div>
    </div>
  );

Answer 2

In your code,

addDemoButton()

is empty without any parameter.

I believe you should put currentItem inside the function and called it.

addDemoButton(currentItem);