React component doesn't get rendered on initial load - reactjs

Question

I recently started learning React and I'm trying to make my simple app to work.
I have main App component:
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<header>
<h1>Test</h1>
</header>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="collapse navbar-collapse" id="navbar-collapse-1">
<ul className="nav navbar-nav">
<li><NavLink to="/vehiclemakes">Vehicle Makes</NavLink></li>
</ul>
</div>
</div>
</nav>
<div className="container">
<Route path="/vehiclemakes" component={VehicleMakes}/>
</div>
</div>
</BrowserRouter>
);
}
}
As you can see I'm using routing and in my navbar I have a link to the Vehicle Makes component which should render table with vehicle makes that I get with api call:
let vehicleMakes = [];
class VehicleMakes extends React.Component{
componentDidMount(){
Axios.get(`http://localhost:15163/api/vehiclemakes`)
.then((result) => {
const vehicleMakesData = result;
vehicleMakes = vehicleMakesData.data.data;
})
}
render(){
return(
<div>
<VehicleMakesTable vehicleMakes={vehicleMakes} />
</div>
);
}
}
VehicleMakesTable component renders VehicleMakesTableHeader and VehicleMakesTableRow components:
class VehicleMakesTable extends React.Component{
render(){
console.log("table");
const rows = [];
this.props.vehicleMakes.forEach((vehicleMake) => {
rows.push(
<VehicleMakesTableRow
vehicleMake={vehicleMake}
key={vehicleMake.id} />
);
});
return(
<table>
<thead>
<VehicleMakesTableHeader />
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}
class VehicleMakesTableHeader extends React.Component{
render(){
return(
<tr>
<th>Name</th>
</tr>
);
}
}
class VehicleMakesTableRow extends React.Component{
render(){
const vehicleMake = this.props.vehicleMake;
return(
<tr>
<td>{vehicleMake.name}</td>
</tr>
);
}
}
The problem that I have is that on initial load when I click Vehicle Makes link in main App component, my table gets rendered but without any rows. So "VehicleMakesTableHeader" component gets rendered but "VehicleMakesTableRow" component doesn't. When I click the link again (second time) then the "VehicleMakesTableRow" component gets rendered also.
I don't know what I'm doing wrong, why do I have to click link two times in order for table to be rendered correctly?

Answer 1

The problem is here:
let vehicleMakes = [];
class VehicleMakes extends React.Component{
componentDidMount(){
Axios.get(`http://localhost:15163/api/vehiclemakes`)
.then((result) => {
const vehicleMakesData = result;
vehicleMakes = vehicleMakesData.data.data;
})
}
render(){
return(
<div>
<VehicleMakesTable vehicleMakes={vehicleMakes} />
</div>
);
}
}
You keep vehicleMakes as the regular variable. React is not getting notified of any change with this variable and doesn't re-render. That's why you have something like a react state. Every time state changes - react will get notified that state has changed and do re-render. Fix:
class VehicleMakes extends React.Component{
constructor(props) {
super(props);
this.state = { vehicleMakes: [] }
}
componentDidMount(){
Axios.get(`http://localhost:15163/api/vehiclemakes`)
.then((result) => {
const vehicleMakes = result.data.data;
this.setState({ vehicleMakes })
})
}
render(){
return(
<div>
<VehicleMakesTable vehicleMakes={this.state.vehicleMakes} />
</div>
);
}
}

Answer 2

You need to store vehicleMakes in state in order to trigger a re-render when you update it in componentDidMount:
class VehicleMakes ... {
state = { vehicleMakes: [] }
...
.then(result => this.setState({ vehicleMakes: result.data.data }));
...
<VehicleMakesTable vehicleMakes={this.state.vehicleMakes} />