const test = () = { const array = ['hello', 'myNameIs'] return ( { array.map((arr) => ( <div>{arr}</div> <button>Edit</button> ) } ) }Este método .map() no funciona como pretendía.
Con el código, estaba tratando de obtener
hello [button] myNameIs [button]como esto.
Pero cuando renderizo el código, obtengo
hello MynameIs [button]En este tipo de situación, ¿cómo puedo cambiar la instrucción .map()?
¿Debo usar un índice?
Eche un vistazo al siguiente ejemplo, lo creé casi con su código, funciona como esperaba sin problemas.
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>Cree el botón dentro de la etiqueta div . También puede usar el estilo para alinear los elementos según sea necesario
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> )}) }