Reputation: 192
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?
Upvotes: 0
Views: 84
Reputation: 17648
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}>
...
Upvotes: 1
Reputation: 2417
I think what you’re looking for is to replace that innermost li
with:
{
correctionsWords[key].map(value => <li>{value}</li>)
}
Upvotes: 1