Render map not displaying data on screen - reactjs

Question

I can't seem to get my renderJob mapping to render out properly. I have no errors in the console and can't figure out while nothing is showing up. Is there a problem with the way I'm mapping the object to the index?
import React, { Component } from 'react'
import PropTypes from 'prop-types'
const jbSampleData = [
{
name: 'A place',
location: 'USA',
engineer: "Contact Engineer",
service: "Last install"
},
]
class Job extends Component {
render() {
const renderJob = this.props.data.map((obj, idx) => {
return (
<div key={idx}>
<div>
<p>
<span>Name:</span> {obj.name} < br/>
<span>Location:</span> {obj.location} <br />
<span>Engineer Contact:</span> {obj.engineer} <br />
<span>Service:</span> {obj.service} <br />
</p>
</div>
</div>
);
});
return (
<div>
<renderJob />
Hello
</div>
)
}
}
Job.propTypes = {
data: PropTypes.arrayOf(
PropTypes.object
)
}
Job.defaultProps = {
data: jbSampleData
}
export default Job;

Answer 1

You are storing the map result basically an array in a variable renderJob, that is not a react component.
You need to render it like this:
return (
<div>
{renderJob}
Hello
</div>
)
Basically <renderJob> will get converted into:
React.createElement(renderJob, null); //new custom element
But in case of {renderJob} its value will get replaced, and all the ui items that variable is having will get rendered.
Why it is not throwing the error with <renderJob/> ?
Because name is stated with small letter so it will be considered as a built-in component like div etc, if you use <RenderJob/> it will throw error that RenderJob is not defined.
As per DOC:
When an element type starts with a lowercase letter, it refers to a
built-in component like <div> or <span> and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like <Foo /> compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.

Answer 2

Instead of <renderJob /> change to {renderJob}