Mapping an object of array in Reactjs

Question

I have an object each key of the object has an array value

const correctionsWords  = {
"word": [ "1" , "2"] ,
"word2": ["20" ,"22" ] 
};

I did map through each key by using the following code

let correctionList =  Object.keys(correctionsWords).map(  (key)  => {
        return (
          <div>
              {
                  //console.log( 'After Mapping ' , correctionsWords[key]) [1,2,3]
                   <ul>
                     <li>{key} { /* word  */}
                      <ul> 
                        <li>{correctionsWords[key]}</li>
                      </ul>
                     </li>  
                     </ul>
              } 
          </div> 
        ); });

the result is * key: word * value: 1 2 How can I list the values of the array?

devserkan · Accepted Answer · 2018-09-15 13:08:43Z

1

Map again each array element:

<ul>
  {correctionsWords[key].map(el => (
    <li key={el}>{el}</li>
  ))}
</ul>

I've used a key as the element here. If the elements are not unique better use another key. Also, you need another key for your object mapping in the topmost div:

return (
    <div key={key}>
    ...

edited Sep 15, 2018 at 13:08

answered Sep 15, 2018 at 13:03

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

4 Comments

devserkan Over a year ago

You are welcome. If the answer helped you consider accepting it, please.

Rami Salim Over a year ago

Sure It did help me

Arup Rakshit Over a year ago

@RamiSalim Look at the up and down arrow, there is a checkmark, press it.

devserkan Over a year ago

"To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in." stackoverflow.com/help/someone-answers :)

Ben Steward · Accepted Answer · 2018-09-15 13:04:27Z

1

I think what you’re looking for is to replace that innermost li with:

{
  correctionsWords[key].map(value => <li>{value}</li>)
}

answered Sep 15, 2018 at 13:04

Ben Steward

2,4171 gold badge15 silver badges26 bronze badges

Collectives™ on Stack Overflow

Mapping an object of array in Reactjs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related