how to return an object in a map function (React.js)

Question

I have some user input, I need to split them into characters, then just using map to return both the character array and index array as an object. Try many ways but all failed. Hope I can get some helps here. I am new to react.js and my code may sounds dum. The code is in App.js the main component.

  charList = () => { 
    this.state.userInputs.split("").map((ch1, index1) => 
    { return {ch: ch1, index: index1}
    } ); 
  }

I want to be able to access this.charList.ch and this.charList.index for the two arrays. Not sure I described my question clearly. Thanks in advance.

Good question, I know it is dum, but I am following a Udemy course on React.js where the teacher simply use this as an assignment that may not make sense in real life. :) — Jason Yan
– Jason Yan, Commented Jun 22, 2020 at 20:07
.map((ch, index) => ({ ch, index })) would work as well. Array.prototype.map takes a function that receives array item, index and full array and returns the mapped item so [1,2].map(i=>i*3) the function i=>i*3 receives 1 and then 2 and will return 3 and 6 resulting in [3,6] — HMR
– HMR, Commented Jun 22, 2020 at 20:44

Ross Mackay · Accepted Answer · 2020-06-22 19:17:41Z

1

If you want something like this:

[
  { "ch": "h", "index": 0 },
  { "ch": "i", "index": 1 }
]

You're just missing a return before this.state.userInputs.split("")

charList = () => { 
    return this.state.userInputs.split("").map((ch1, index1) => {
        return {ch: ch1, index: index1 }
    })
}

answered Jun 22, 2020 at 19:17

Ross Mackay

9724 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason Yan Over a year ago

Yes you understood exactly what I wanted. Thank you! so what is the first 'return' actually doing? I guess the 2nd 'return' is to assign values to the fields of the object, so the 1st 'return' is to return the whole object to charList? also, I don't understand why the code below is not showing me the result: ~~~ render() { return ( <div> <p> {this.charList.ch} </p> </div> ); } ~~~ oops, first time here, don't even know how to format the code.

Ross Mackay Over a year ago

You got it (mostly!) - the second return is returning each object, the outer return is returning the entire array. You won't be able to render this.charList without a few changes. 1) this.charList seems to be a method on the class, so you'll need to call it like {this.charList()} 2) charList returns an array, so you'd have to either map over each item to get it's ch, or access an item by key ({this.charList()[0]}

Ross Mackay Over a year ago

And SO doesn't do code blocks in comments, don't worry ;)

Jason Yan Over a year ago

That totally make sense! You also helped me to clarify a few more points that I did not think of. Really appreciate!!

sidverma · Accepted Answer · 2020-06-22 19:21:36Z

0

try this :

 return  this.state.userInputs.split("").map((ch1, index1) => 
        { 
            let obj= {};
            obj.ch = ch1; 
            obj.index = index; 
         return obj;
        });

answered Jun 22, 2020 at 19:21

sidverma

1,19512 silver badges25 bronze badges

2 Comments

Jason Yan Over a year ago

thank you! so what is the 1st "return" actually doing? it appears to me that the 2nd "return" already returned the object back to charList.

Jason Yan Over a year ago

oh, I just realized that the other answer is returning ONE array with each element containing two fields, while your answer is returning TWO arrays with each element in each array containing one field only. So, literally you answered my question exactly, although I did not have a clear mind when I asked the question. Anyway, thank you for your help!

Collectives™ on Stack Overflow

how to return an object in a map function (React.js)

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related