reactjs iterate over a array in functional component - reactjs

Question

I have a array of employee objects and i'm using that array(passed as state) to build rows in a table(as shown below). I get this error while iterating over the array. when I display the array using {props.employee_data}(the line is commented)
TypeError: Cannot read property 'map' of null
Code:
export default function(props) {
let employees = null
return (
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Full Name</th>
<th>Gender</th>
<th>Current Annual Salary</th>
<th>2018 Gross Pay Received</th>
<th>2018 Overtime Pay</th>
<th>Department</th>
<th>Department Name</th>
<th>Division</th>
<th>Assignment Category</th>
<th>Employee Position Title</th>
<th>Position Under-filled</th>
<th>Date First Hired</th>
</tr>
</thead>
<tbody>
{/* <tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
*/}
{/* {props.employee_data} */}
{props.employee_data.map((employee)=>{
return <tr>employee</tr>
}
)}
</tbody>
</Table>
)
}
parent component
class App extends Component {
constructor(props){
super(props)
this.state = {
employee_data: null,
column_names: null
}
}
componentDidMount = () => {
this.fetchData();
}
fetchData = async () => {
fetch(county_data).
then(response => response.json()).
then(response => {
console.log(response.data)
let column_names = response.meta.view.columns.map((item)=>{
return item['name']
})
// console.log(JSON.stringify(response.data))
this.setState({
employee_data: response.data,
column_names: column_names
})
})
}
render() {
return (
<div className="App">
<Container>
<Row>
<Col lg={4}>1 of 3</Col>
<Col lg={4}>2 of 3</Col>
<Col lg={4}>2 of 3</Col>
</Row>
</Container>
<br></br>
<br></br>
<DataTable employee_data={this.state.employee_data}/>
</div>
);
}
}
export default App;

Answer 1

Initially the employee_data is null, it is not until your fetch, the employee data is an array.
map is a function on the array's prototype, hence it will not be available on the initial employee_data which is null. Only after the fetch, the employee data is an array and the map function is available.
To get around this, you can initially declare employee_data as an empty array.
this.state = {
employee_data: [],
... other state data,
}

Answer 2

you can do th
export default function(props) {
let employees = props.employee_data?props.employee_data:[];
return (
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Full Name</th>
<th>Gender</th>
<th>Current Annual Salary</th>
<th>2018 Gross Pay Received</th>
<th>2018 Overtime Pay</th>
<th>Department</th>
<th>Department Name</th>
<th>Division</th>
<th>Assignment Category</th>
<th>Employee Position Title</th>
<th>Position Under-filled</th>
<th>Date First Hired</th>
</tr>
</thead>
<tbody>
{/* <tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
*/}
{/* {props.employee_data} */}
{employees.map((employee)=>{
return <tr>employee</tr>
}
)}
</tbody>
</Table>
)
}