Re-render again after map - reactjs

Question

i have a problem that i need to add the data from state and loop it using map. in my project im using redux and got the value from redux its self but in the state won't render again after map.
i already tried to using this.props.sendNameProduct in my array of map but when i added the new product the first product updated with the value of last product. i just want it to store the first product and then when im inputting the second product , the first product still there.
class OpenPositions extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
console.log(this.props, "ini porpoaspdopa")
console.log(this.props.sendNameProduct, "ini send name")
console.log(this.props.sendNameProduct.sendNameProduct," ini kirik");
let dapetItem = this.props.cobaSend == null ? [] : this.props.cobaSend
let cobaSend = [{qty: '123'}];
let getItem = localStorage.getItem('storage')
let newData =[];
let newDataBaru = [];
let newArr = [];
newArr.push(this.props.cobaSend);
newData = newDataBaru.concat(newArr)
console.log(newArr, "ini new array");
console.log(newData, "ini new Data")
return (
<div style={{height:'100%', overflow:'auto'}}>
<table className="borderline" cellspacing="0" cellpadding="0" border="0" style={{height:'100%'}}>
<tbody>
<tr>
<td>
<div>
<div>
<table style={{height:"100%", width:"100%"}}>
<tbody>
<tr align="center" className="fieldtitle fieldbg">
<td align="left">Items</td>
<td>Qty</td>
<td>Sold</td>
<td>Bought</td>
<td>Avail</td>
<td>Date</td>
<td>Options</td>
</tr>
</tbody>
<tbody className="divOP2">
{this.props.cobaSend.map((item, index) =>{
console.log(item, "ini item bois");
console.log(index, "ini index")
return(
<tr align="center" className="contentbg">
<td align="left" nowrap className="bggradientleft" style={{backgroundImage: ' url(https://demo.sgberjangka.com/images/background_gradientleft.gif)', backgroundRepeat: 'repeat-y', backgroundRepeatX: 'repeat', boxSizing: "border-box", border: "1px solid black", backgroundSize:"100%"}}><font color="#FFFFFF"><strong>{item.product}</strong></font></td>
<td>{item.qty}</td>
<td>{item.sell}</td>
<td>{item.buy}</td>
<td>{item.avail}</td>
<td>{item.date}</td>
<td>
<input
className="checkbox"
type="checkbox"
checked={this.state.isChecked}
onChange={this.handleCheckBox}
/>
</td>
</tr>
)})}
</tbody>
</table>
</div>
</div>
</td>
</tr>
<table className="normal" cellspacing="0" cellpadding="0" border="0" style={{height:'100%'}}>
<tbody>
<tr>
<td>
<button type="submit" className="normalButton wide">GTC Order (Liq)</button>
</td>
<td>
<button type="submit" className="normalButton wide">Buy/Sell (Liq)</button>
</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</div>
)
}
};
function stateProps(state){
console.log(state.main.sendNameProduct, "ini send Name Product")
console.log(state.main.sendValueSell, "ini send sell Product")
console.log(state.main.sendValueBuy, "ini send buy Product")
console.log(state.main.sendQuantity, "ini send qty Product")
return {
sendNameProduct : state.main,
sendValueSell : state.main,
sendValueBuy : state.main,
sendQuantity : state.main
};
};
function dispatchProps(dispatch){
return {
}
}
export default connect(
stateProps,
dispatchProps
)(OpenPositions);
the result its when im updating with new data the first one changed and got same values with new data.
lets assume with this.props.cobaSend got the objects like {product: "HKK50_BBJ", qty: "12", sell: "28579", buy: "--", avail: "12", …}, in mapping got the value product, qty ,sell ,and etc. but when im inserting the new data the value in map not updateing with the new array.

Answer 1

Your newData.map loop on the newData array, but display this.props.sendNameProduct... values in your DOM.
Might just be an error on accessing those values, try call the item return by the map callback :
{
newData.map((item, index) =>{
console.log(item, "ini item bois");
console.log(index, "ini index")
return(
<tr align="center" className="contentbg">
<td align="left" nowrap className="bggradientleft"><font color="#FFFFFF"><strong>{item.item}</strong></font></td>
<td>{item.qty}</td>
<td>{item.sell}</td>
<td>{item.buy}</td>
<td>{item.date}</td>
<td>{item.avail}</td>
<td>
<input
className="checkbox"
type="checkbox"
checked={this.state.isChecked}
onChange={this.handleCheckBox}
/>
</td>
</tr>
)
});
}

Answer 2

class OpenPositions extends Component {
constructor(props) {
super(props);
this.state = {
newArr : []
};
}
render() {
console.log(this.props, "ini porpoaspdopa")
console.log(this.props.sendNameProduct, "ini send name")
console.log(this.props.sendNameProduct.sendNameProduct," ini kirik");
console.log(this.props.cobaSend," ini COBA SEND");
// let dapetItem = this.props.cobaSend == null ? [] : this.props.cobaSend
// let cobaSend = [{qty: '123'}];
// let getItem = localStorage.getItem('storage')
let newArr = this.state.newArr;
newArr.push(this.props.cobaSend);
console.log(newArr, "ini new array");
console.log(newData, "ini new Data")
//let newData = [];
//let newDataBaru = newData.concat(data);
//newData.push(data[0])
//console.log(newData, "ini new Data")
//console.log(newDataBaru,"ini data baru")
//newData = newDataBaru.concat(data)
// for(let i =0 ; i< 5; i++){
// }
//console.log(newData, "ini new Data")
return (
<div style={{height:'100%', overflow:'auto'}}>
<table className="borderline" cellspacing="0" cellpadding="0" border="0" style={{height:'100%'}}>
<tbody>
<tr>
<td>
<div>
<div>
<table style={{height:"100%", width:"100%"}}>
<tbody>
<tr align="center" className="fieldtitle fieldbg">
<td align="left">Items</td>
<td>Qty</td>
<td>Sold</td>
<td>Bought</td>
<td>Avail</td>
<td>Date</td>
<td>Options</td>
</tr>
</tbody>
<tbody className="divOP2">
{newArr.map((item, index) =>{
console.log(item, "ini item bois");
console.log(index, "ini index")
return(
<tr align="center" className="contentbg">
<td align="left" nowrap className="bggradientleft" style={{backgroundImage: ' url(https://demo.sgberjangka.com/images/background_gradientleft.gif)', backgroundRepeat: 'repeat-y', backgroundRepeatX: 'repeat', boxSizing: "border-box", border: "1px solid black", backgroundSize:"100%"}}><font color="#FFFFFF"><strong>{item.product}</strong></font></td>
<td>{item.qty}</td>
<td>{item.sell}</td>
<td>{item.buy}</td>
<td>{item.avail}</td>
<td>{item.date}</td>
<td>
<input
className="checkbox"
type="checkbox"
checked={this.state.isChecked}
onChange={this.handleCheckBox}
/>
</td>
</tr>
)})}
</tbody>
</table>
</div>
</div>
</td>
</tr>
<table className="normal" cellspacing="0" cellpadding="0" border="0" style={{height:'100%'}}>
<tbody>
<tr>
<td>
<button type="submit" className="normalButton wide">GTC Order (Liq)</button>
</td>
<td>
<button type="submit" className="normalButton wide">Buy/Sell (Liq)</button>
</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</div>
)
}
};
im using state to store it there and then when im inputting the data its worked.