So it seems I broke the React way of things. I currently have things setup that the main App container (which contains all the router logic) will fetch all data from the API on it's initial state.
I pass down the function:
createPage(page) {
console.log('submitted')
instance.post('/admin/createPage',page).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
}
The API accepts the data and I see it update the database.
My issue is: after I submit the data, the container component doesn't update it's state which holds all the data.
For example, this is the App container:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import axios from 'axios'
import Header from '../components/Header'
import Dashboard from './Dashboard'
import AddEditPage from './AddEditPage'
const instance = axios.create({baseURL: 'http://localhost:1337'})
class App extends Component {
constructor(props) {
super(props);
this.state = {
"pages": []
}
this.createPage = this.createPage.bind(this)
}
componentDidMount() {
this.getPages()
}
getPages() {
instance.get('/admin/listPages')
.then(
(response) => {
this.setState(
{
"pages": response.data
}
)
})
.catch((error) => {console.log(error)})
}
createPage(page) {
console.log('submitted')
instance.post('/admin/createPage',page).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
}
render() {
return (
<Router>
<div className="Router">
<div className="Navbar">
<Header />
</div>
<div className="Wrapper">
<Route exact path="/" render={ () => (
<Dashboard pages={this.state.pages} />
)} />
<Route path="/admin/new-page" render={ () => (
<AddEditPage createPage={this.createPage} />
)} />
<Route path="/admin/edit-page/:id" render={ () => (
<AddEditPage />
)} />
</div>
</div>
</Router>
);
}
}
export default App;
Currently, I get around this issue by setting the window.href after submit. This reloads the whole page (not ideal).
handleSubmit(e) {
e.preventDefault();
this.props.createPage(this.state)
//TODO: update main container state of page titles, then redirect
window.location = "/"
}