Question

75

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

rated 0 times [ 80] [ 5] / answers: 1 / hits: 7165 / 3 Years ago, thu, december 16, 2021, 12:00:00



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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaleyv

Add To Favorites

Follow

Total Points: 259

Total Questions: 99

Total Answers: 107

Location: Saint Helena

Member since Tue, Nov 3, 2020

4 Years ago

kaleyv questions

1 How can I calculate the total price of products in a cart using JavaScript?

Sun, Jan 16, 22, 00:00, 2 Years ago

1 How do I reset mocked values in Jest?

Sat, Oct 24, 20, 00:00, 4 Years ago

1 NuxtJS: Disable console.log in production env

Sun, Oct 18, 20, 00:00, 4 Years ago

1 forwarding ref to react.FC gives type error: Property ref does not exist on type 'IntrinsicAttributes & Props & { children :? ReactNode}

Wed, Sep 16, 20, 00:00, 4 Years ago

1 How to change the input field value using Selenium and Python

Thu, Jun 11, 20, 00:00, 4 Years ago

View All

answered 3 Years ago jacie · Accepted Answer

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.