I want to render a Object .
My Object is:
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
I want it to render as:
id is 1 ; name is ABC
id is 3 ; name is DEF
I want to make this object in a function and is called in render function.
Data is an object so directly we can't use map on that, so use Object.keys or Object.entries to get the array first, then use map on that to create ui items.
Using Object.keys:
_renderObject(){
return Object.keys(ObjectTest).map((obj, i) => {
return (
<div>
id is: {ObjectTest[obj].id} ;
name is: {ObjectTest[obj].name}
</div>
)
})
}
Using Object.entries:
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
class App extends React.Component{
_renderObject(){
return Object.entries(ObjectTest).map(([key, value], i) => {
return (
<div key={key}>
id is: {value.id} ;
name is: {value.name}
</div>
)
})
}
render(){
return(
<div>
{this._renderObject()}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>Check this answer also: Loop an object in react?
code: return Object.keys(ObjectTest).map( ( obj, i) => { all these mappings... Bruh. Use "pre" tag with JSON.stringify
<pre>
{JSON.stringify(yourdataobject, null, 2)}
</pre>
The pre tag stands for preformatted text. It just means that whatever is inside is displayed as fixed width and preserves line breaks and whitespace (as written in the HTML code).
JSON.stringify does exactly what it sounds like - turns the object passed in the first argument into a JSON string. The 2nd argument is a replacer function that's not relevant here. The 3rd argument is how much indentation to use - in this case, 2 spaces (which will be be preserved due to the pre tag).
In react you can render your wish answer in browser screen by below code
import React from 'react';
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
class App extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<div>
{
Object.keys(ObjectTest).map((value,index)=>{
<p>id is {ObjectTest[value].id} ; name is {ObjectTest[value].name}</p>
});
}
</div>
);
}
}
export default App;
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}
render(){
return (
<div>
Object.keys(ObjectTest).map( (key)=> {
return <div>
<span>"Id is:"{key}<span>
<span>"Name is:"{ObjectTest[key].name}<span>
</div>
})
</div>
)
}I wonder why it seems that almost every one is using Object.keys!
Object.values(ObjectTest).map((row_, index) =>
<tr>
{Object.values(row_).map(item => <td>{item}</td>)}
</tr>
)}Sample Data:
const ObjectTest = {
1: {
id : 1,
name:'ABC'
},
3: {
id: 3,
name:'DEF'
}
}