map function not returning react
I am new to React. Here I am getting values from props. If both names are the same I want to show a button else I want to return another function. As i tried map function im getting the console but its not returning button. Below is the code i have tried . Can anyone help me
showButton() { const { product } = this.props; const { cartName: { items } } = this.props; let currentproduct = product.name; items.map(function (items) { if (items.name == currentproduct) { console.log('Name', items.name, currentproduct); return ( <div> <div className="ProductContainer"> <button id="add" onClick={this.clickAddCart} > {"Add to cart"} </button> </div> </div> ); } else { return (<div>{this.renderAction()}</div>) } }); } render() { return ( <div className="ProductSection"> {this.showButton()} </div> ); } 
You have to return items.map from the showButton function. Like this:
showButton() { /* code */ return items.map(function(items) { /* code */ }); 
all you need to do is return the jsx from the showButton function
for that you need to add return before your map even though you are having return inside the map but it just returns inside the map and gets assigned to variable to which map is assigned if you have one
return items.map(function(items) {/*logic*/} you can probably do like this:
const result = item.map(function(items){.....} and at the end just do
return result; 
