Question 50812 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to output items in JSX from an array of items? – Javascript

I have a small similar array of

const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}]

And I want to output that in JSX.

This is what I have https://codesandbox.io/s/focused-bose-wgmbny?file=/src/App.js. As you can see, it only outputs the first element of the array.

I have tried using forEach and for loops to no avail. (And developers tell me you should use .map for JSX)

I also tried this:

arr.map((item, index) => (
    <p>{item[index]}</p>
))

I just want the map to output:

"First Item"
"Second Item"
"Third Item"

but it just stops at "First Item"

Tags:

3

Answers


  1. 0 
    const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}]

    It’s an array with a single object as its element.
    When you use map function on arr like this:

    arr.map((item, index) => item[index])

    It iterates over the elements in arr, and for each element (which is the single object in this case) it returns property with key index (which is index of current map iteration). So actually you are invoking arr[0][0] here.

    Correct array would be:

    const arr = ["First Item", "Second Item", "Third Item"];

    Then you can print each item:

      return (
    <div className="App">{arr.map((item) => item)}</div>
  );
    Login or Signup to reply.
  2. 0

    @steve You have to consider multiple points here

    1. Your array contains an object, so the length of array is 1 and will only iterate once.
    2. Inside your array, you have an object, and accessing item[index] fetches the first index of the object, hence the result.
      To fix this

    Approach 1

    return (
    <div className="App">
      {testArry.map((item, index) => {
        const obj = Object.values(item).map(item1 => item1)
        return obj;
      })}
    </div>
  );

    Approach 2

    const testArry = ["First Iteam", "Second Item", "Third Item"];

return (
    <div className="App">
      {testArry.map((item, index) => {
        return item
      })}
    </div>
  );
}
    Login or Signup to reply.
  3. 0

    in your example array only have 1 object

    and you loop through it

    and map will loop only once. it will return your object;

    your item is { "0": "First Item", "1": "Second Item", "2": "Third Item"};

    and index always 0 because it will loop only once.

    and you use item[index]

    which means your item is object above

    and item[index] means only key of object

    const arr = [{ "0": "First Item", "1": "Second Item", "2": "Third Item"}];

// here is in your array only have 1 element

//{ "0": "First Item", "1": "Second Item", "2": "Third Item"}

// and if you console it you will see that item is
// { "0": "First Item", "1": "Second Item", "2": "Third Item"}


console.log(arr[0]);
console.log(arr[0][0]);
arr.map((item, index) => {
    console.log(item[index]);
    console.log(item);
});

// so you should do
const arr1 = [{ "0": "First Item"}, {"1": "Second Item"}, {"2": "Third Item"}];

arr1.map((item, index) => {
  console.log(item[index]);
  console.log(item);
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search