I have a array that I want to map properly but I can't do it I always keep getting some error here is the array that I want to map
useful_links:
0: {Register Now: 'some linke'}
1:{Age Calculator: 'some link'}
2: {Join Now: 'some link'}
3:{Cantonment Board Official Website: 'some link'}
I want to map it as so I can use the key as text in anchor tag and those links as href
<a href={some link}>text that are key</a>
thanks in advance!
You can use Object.entries() to get the list of keys / values from an object. For example, using a memo hook to produce a nicer array of objects...
const links = useMemo(
() =>
useful_links.flatMap((obj) =>
Object.entries(obj).map(([text, href]) => ({
href,
text,
}))
),
[useful_links]
);
return (
<ul>
{links.map(({ href, text }, i) => (
<li key={i}>
<a href={href}>{text}</a>
</li>
))}
</ul>
);
this is what the data shows inside the console:
I tried displaying it with these but it failed
{Object.entries(value).map(([key, value]) => {
return (
<p key={key}>
<li>
{key}
{value}
{console.log(value.id)} //this will show as undefined
</li>
</p>
);
})}
{value} will show this error :
Objects are not valid as a React child (found: object with keys {color, quantity}). If you meant to render a collection of children, use an array instead.
{value.id} or the {value.name} will show as undefined
With the map, it will say that value.map is not a function
{value.map((value, key) => (
<>
<div>{value.id}</div>
<div>{value.name}</div>
</>
))}
codesandbox: https://codesandbox.io/s/display-the-manipulated-data-dy204r
Your object has a complex structure, and in order to iterate, you need to check if one of the items is Array using Array.isArray(), if yes, then loop them and use, else use the properties directly
Below is the working code of the mock of your object and iteration. I have just logged the values, you can use them in any way you want
let myObj = {
s: [{
color: 'a',
q: '8'
}, {
color: 'b',
q: '2'
}],
name: 'Anne',
id : 18
}
Object.keys(myObj).forEach(function(key) {
if (Array.isArray(myObj[key])) {
myObj[key].forEach(function (item, index) {
console.log(item.color);
console.log(item.q);
});
}
else
console.log(myObj[key])
});
You can do something like this
{Object.entries(value).map((v, key) => {
return (
<p key={key}>
<li>
{key}
{v.name}
{console.log(v.id)} //this will show as undefined
</li>
</p>
);
})}
I have an object similar to this:
{
id: number,
kids: [{
id: number,
kids: [{
id: number,
kids: []
}]
}]
}
So it has property kids which is an array of kids each of which might have its own array of kids. I need to render original object in a tree view list like this:
<ul>
{object.map(item => (
<li>
<p>{item.value}</p>
{item.kids ?
{item.kids.map(item => (
<ul>
<li>
<p>{item.value}</p>
</li>
</ul>
))}
: null
}
</li>
))}
</ul>
So every item of kids will be a <li></li> element with <ul></ul> inside of it if item.kids isn't empty array.
I could keep going like this but it's pretty messy and more importantly I don't know when exactly kids property will be an empty array. So I need somehow loop over original object and it's properties and do something like
while (kid.kids) {
return {kid.kids.map(kid => (
<li>
<p>{kid.value}</p>
<ul>
kid.kids.map(kid => (
etc
))
</ul>
</li>
}))
}
But I can't understand the better way to loop like this.
This is probably best solved with recursion.
const Kids = ({id, kids}) => {
return {
<li key={id}>
<p>{id}</p>
{kids
? (<ul>{kids.map((kid) => <Kids id={kid.id} kids={kid.kids} />)}</ul>)
: null;
}
</li>
}
};
I am trying to map over array of objects which each array contains another nested array of objects. However, the map does not work on the nested array. How do i map over the contents of the nested array?
data structure for nested array of objects looks like this:
const items = [
{
page_num: 1,
status: "PROCESSED",
table_text_data:[
{bottom:58, height:60, left:60, right:67, text:"recorded"},
{bottom:75, height:67, left:50, right:60, text:"symbolic"},
{bottom:80, height:80, left:77, right:89, text:"fever"},
]
}
];
map for page_num and status looks like this:
{this.props.items.map(item =>{
return (
<ul><li> page_num={item.page_num} </li>
<li> status:{item.status}</li>
{item.table_text_data.map((c,i)=>(
<ul><li>bottom={c.bottom}</li>
<li>height={c.height}</li>
<li>left={c.right}</li>
<li>right={c.left}</li>
<li>text={c.text}</li></ul>
))}
</ul>
)})}
page_num and status works fine but not for table_text_data. how should i map through it?
screenshot of the warning i'm getting as well:
https://i.stack.imgur.com/sqREQ.png
Any help would be much appreciated. Thank you
Why don't you use re-use array map?
{this.props.items.map((item, i) =>{
return (
<ul key={'parent' + i}><li> page_num={item.page_num} </li>
<li> status:{item.status}</li>
{item.table_text_data.map((c,j)=>(
<li key={'child' + j}>
<ul><li>bottom={c.bottom}</li>
<li>height={c.height}</li>
<li>left={c.right}</li>
<li>right={c.left}</li>
<li>text={c.text}</li></ul>
</li>
))}
</ul>
)})}
the error you give is has the answer in it.
Each child in a list should have a unique key prop
you're already halfway there by extracting the index that holds the nested object.
Now you only have to add the property key={I} to your ul
const items = [
{
page_num: 1,
status: "PROCESSED",
table_text_data:[
{bottom:58, height:60, left:60, right:67, text:"recorded"},
{bottom:75, height:67, left:50, right:60, text:"symbolic"},
{bottom:80, height:80, left:77, right:89, text:"fever"},
]
},
{
page_num: 2,
status: "PROCESSED",
table_text_data:[
{bottom:58, height:60, left:60, right:67, text:"recorded"},
{bottom:75, height:67, left:50, right:60, text:"symbolic"},
{bottom:80, height:80, left:77, right:89, text:"fever"},
]
}
];
const ItemDisplay = (props) => (
<React.Fragment>
{props.items.map(item => (
<ul key={item.page_num}>
<li>page_num={item.page_num}</li>
<li>status={item.status}</li>
{item.table_text_data.map((c,i) => (
<ul key={i}>
<li>bottom={c.bottom}</li>
<li>height={c.height}</li>
<li>left={c.right}</li>
<li>right={c.left}</li>
<li>text={c.text}</li>
</ul>
))}
</ul>
))}
</React.Fragment>
);
ReactDOM.render(
<ItemDisplay items={items} />,
document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
you can use nested map function to acces the files. but you need to speciy that nested map() should work only for table_text_data property,other wise your parent map function will check for the contents inside table_text_data
you can rewrite the code like
{this.props.items.map(item =>{
return(
<ul>
<li> page_num={item.page_num} </li>
<li> status:{item.status}</li>
</ul>
if(item ==='table_text_data'){
{item.table_text_data.map((c,i)=>(
return (
<ul><li>bottom={c.bottom}</li>
<li>height={c.height}</li>
<li>left={c.right}</li>
<li>right={c.left}</li>
<li>text={c.text}</li></ul>
))
}
)}
</ul>
)})}
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?
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}>
...
I think what you’re looking for is to replace that innermost li with:
{
correctionsWords[key].map(value => <li>{value}</li>)
}