React.js passing an list item to Database while in iteration

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"]
  }
]

slawciu · Accepted Answer · 2020-07-24 08:30:15Z

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>
  );

answered Jul 24, 2020 at 8:30

slawciu

8155 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Etika49 Over a year ago

thats correct i hve missed the parameter. works perfectly. thanks.

Kevin Moe Myint Myat · Accepted Answer · 2020-07-24 08:34:49Z

1

In your code,

addDemoButton()

is empty without any parameter.

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

addDemoButton(currentItem);

answered Jul 24, 2020 at 8:34

Kevin Moe Myint Myat

2,1851 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

React.js passing an list item to Database while in iteration

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related