You should use Object.values() to convert the object to array, so you can .map() it. Following snippet will give you a better sense of it.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
var x = {"Employer1":
{"-LKLJLJDLJKDLJF":
{"Candidates":15,"Description":"Graphic Designer","Documents":5,"Hours":5,"Location":"Padi","PostedTime":"20-1-2019","RatePerHour":"$25","Status":"open","Tags":"Designer, Graphic Designer","Title":"Designer","index":1},
"-LWQVhCZ00q6kb0nRWIB":
{"Candidates":"20","Description":"Develop web apps","Documents":"df","Hours":"10","Location":"chennai","PostedTime":"12-1-2019 5:20 pm","RatePerHour":"$52","Status":"open","Tags":"Developer, web developer","Title":"Developer","index":2},
"-LWzh2BF-QEfS3iO_Dfk":{
"Description":"sample data entry","Documents":"nil","Hours":"21","Location":"chennai","PostedTime":"24/01/2019, 17:22:22","RatePerHour":"20","Tags":"data entry","Title":"Data Entry"},
"Job1":{
"Candidates":10,"Description":"Job Description for Job1","Documents":0,"Hours":5,"Location":"Chennai","PostedTime":"17-01-2019 12:35 PM","RatePerHour":100,"Status":"Open","Tags":"Flyers, Banners","Title":"Job Title for Job1","index":3},"job4":{"Candidate":10}},
"Employer2":{
"-ASFSLKDDSFSFKFS":{
"Candidates":10,"Description":"Sales Manager","Documents":2,"Hours":4,"Location":"Saidapet","PostedTime":"5-01-19 4:20 PM","RatePerHour":"$60","Status":"open","Tags":"Sales","Title":"Sales dept","index":4},
"-KLFLGJLJGDkldJDKF":{
"Candidates":80,"Description":"Angular Developer","Document":1,"Hours":6,"Location":"TTK","PostedTime":"5-01-19 5:20 PM","RatePerHour":"$80","Status":"open","Tags":"Developer, Angular","Title":"Developer","index":5},
"-LWzoqTdlEQITAuwiyRq":{
"Description":"design job","Documents":"nil","Hours":"12","Location":"home","PostedTime":"24/01/2019, 17:56:27","RatePerHour":"32","Tags":"design","Title":"design"},
"-LX1lWvgQ4S_pgkbjYhp":{
"Description":"this is the data for job 4","Documents":"nil","Hours":"4","Location":"chennai","PostedTime":"25/01/2019, 07:40:48","RatePerHour":"20","Tags":"job 4","Title":"job 4"},
"-LX1larjS2pdQYQk7KMG":{
"Description":"this is the data for job 5","Documents":"nil","Hours":"5","Location":"chennai","PostedTime":"25/01/2019, 07:41:09","RatePerHour":"25","Tags":"job 5","Title":"job 5"},
"-LX1lk8NIsjwpJoo387O":{
"Description":"this is the data for job 6","Documents":"nil","Hours":"6","Location":"chennai","PostedTime":"25/01/2019, 07:41:47","RatePerHour":"26","Tags":"job 6","Title":"job 6"}}
}
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
items: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn React", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
}
}
render() {
return (
<table>
<tbody>
{
Object.values(x.Employer1).map((item, key) => {
return (
<tr key={key}>
<td>{item.Candidates}</td>
<td>{item.Description}</td>
</tr>
)
})
}
{
Object.values(x.Employer2).map((item, key) => {
return (
<tr key={key}>
<td>{item.Candidates}</td>
<td>{item.Description}</td>
</tr>
)
})
}
</tbody>
</table>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
<!-- language: lang-html -->
<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="app"></div>
<!-- end snippet -->
That's *property spread notation*. It was added in ES2018, but long-supported in React projects via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).
`{...this.props}` *spreads out* the "own" properties in `props` as discrete properties on the `Modal` element you're creating. For instance, if `this.props` contained `a: 1` and `b: 2`, then
<Modal {...this.props} title='Modal heading' animation={false}>
would be the same as
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
But it's dynamic, so whatever "own" properties are in `props` are included.
Since `children` is an "own" property in `props`, spread will include it. So if the component where this appears had child elements, they'll be passed on to `Modal`. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a `children` property in the opening tag. Example:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-js -->
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);
<!-- language: lang-css -->
.first {
color: green;
}
.second {
color: blue;
}
<!-- language: lang-html -->
<div id="root"></div>
<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>
<!-- end snippet -->
Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
That replaces `this.state.foo` with a new object with all the same properties as `foo` except the `a` property, which becomes `"updated"`:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);
<!-- language: lang-css -->
.as-console-wrapper {
max-height: 100% !important;
}
<!-- end snippet -->
[1]: https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx
