buy sell buttons not working in react

pratiks

i am using react to render list of tickers, when i click on any of the button rendered, order window popup do not appear, i.e this buttons dont work,
const [tickerList, setTickerList] = useState([]);

{tickerList.map(function(name, index){
return(

<div key={index}>
<button
data-kite="aaaaaaaaaaaaa"
data-exchange="NSE"
data-tradingsymbol={name}
data-transaction_type="SELL"
data-quantity="1"
data-order_type="LIMIT"
data-price="100">Buy {name}
</button>
</div>
);
})}

but when i render this button individually it works,
i.e by creating buttons without iterating over list , it works fine.

<button
data-kite="aaaaaaaaaaaa"
data-exchange="NSE"
data-tradingsymbol="ACC"
data-transaction_type="SELL"
data-quantity="1"
data-order_type="LIMIT"
data-price="100">Buy ACC
</button>


pratiks

https://stackoverflow.com/questions/66871769/difference-between-rendering-buttons-using-this-two-methods-in-react

rakeshr

@pratiks

const handleClick = () => {
return(
fetch('/ticker').then(res => res.json()).then(data => {
setTickerList(data.ticker);
})
)
}

Can you re-check this part of updating the tickerList state correctly?

// method 1 
           {tickerList.map(function(name, index){

Also, print to console and check again in method1 as well, if tickerlist is updated properly.

For us to debug further on this, you need to paste here complete code.

pratiks

complete code (react)
https://ide.codingblocks.com/s/449940

pratiks

on refreshing, page looks like this



after clicking showlist button




after clicking showlist button once again



buttons rendered by map function are irresponsive

but the button rendered separately works fine.

also, when i click showlist, state of tickerlist is empty, but still the buttons get rendered , how this is happening.

pratiks

i dont think backend code will be required but still here it is.

https://ide.codingblocks.com/s/449945

pratiks

what i want to accmplish is ,

when list of stocks will be fetched from backend,
buttons corresponding to each stock should be created

pratiks

@rakeshr

pratiks

@sujith

rakeshr

@pratiks
We went through your above-linked code and console output screenshots. It looks like an issue with your tickerList.map iteration and button attributes assignment logic. As all publisher buttons are rendered properly when individually assigned with correct value attribute i.e your method2. It has nothing to do with kite publisher.

pratiks

Can you tell me is it possible to dynamically assign stockname to button, @rakeshr

pratiks

finally working as expected