CODEWITHSUNDEEP
javascriptreactjsarray.prototype.map
Aden Lee
Aden Lee

Reputation: 260

array.map() is returning elements all together in React JS


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?

Upvotes: 3

Views: 9429

Answers (4)

Shivam Sharma
Shivam Sharma

Reputation: 52

You are not using the correct syntax for the arrow function It should be like const test = ()=>{} React component JSX should return one parent container try wrapping it like:

 const Test = () => {
    const array = ["hello", "myNameIs"];

    return (
      <>
        {array.map((arr) => {
          return (
            <>
              <div>{arr}</div>
              <button>Edit</button>
            </>
          );
        })}
      </>
    )
  }

Here is the working code sandbox link https://codesandbox.io/s/kind-easley-jxiei?file=/src/App.js:57-336

I Hope it helps.

Upvotes: 0

Akshay Kumar
Akshay Kumar

Reputation: 203

const test = () = {
  const array = ['hello', 'myNameIs']
  return (

  {array.map((item,key) => (
    <div key={item}>{item}</div><button>Edit</button>
  )})
}

Upvotes: 0

Saeed Shamloo
Saeed Shamloo

Reputation: 6554

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>

Upvotes: 1

brk
brk

Reputation: 50291

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>
 )

Upvotes: 0

Related Questions