const test = () = {
const array = ['hello', 'myNameIs']
return (
{
array.map((arr) => (
<div>{arr}</div>
<button>Edit</button>
)
}
)
}
This .map() method is not working as I intended.
With the code, I was trying to get
hello [button]
myNameIs [button]
like this.
But when I actually render the code, I get
hello MynameIs [button]
In this kind of situation, How can I change the .map() statement?
Should I use an index?
Take a look at below example, I created it almost by your code, it is working as you expected without problem.
function App() {
const array = ['hello', 'myNameIs'];
return array.map(item => (
<div key={item}>
{item} <button>Edit</button>
</div>
));
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>Create the button inside the div tag. Also you can use style to align the items as required
array.map((arr) => (
<div>{arr} <button>Edit</button></div>
)
const test = () = {
const array = ['hello', 'myNameIs']
return (
{array.map((item,key) => (
<div key={item}>{item}</div><button>Edit</button>
)})
}