How render form on new page using React NavLink? - reactjs

Question

I have the following NavLink in my React Sidebar component that successfully links to an add-folder new page; however, I'm unable to render an AddFolder form on this new page (I've successfully tested that the AddFolder form renders in the Sidebar component, but that's not what I want). I've tried numerous things to resolve this, including using "component={AddFolder}", "render={={() => { return }}". Most recently I tried adding an onClick which doesn't work either.
<section className="AddFolder_Section">
<NavLink
className="AddFolder_Button"
tag={Link}
to={'/add-folder'}
type='button'
onClick={() => this.AddFolder}
>
Add Folder
</NavLink>
</section>
Are there pointers that you can give me on what might work here? Thank you.
Here are the entire contents of my sidebar.js file:
import React, { Component } from 'react'
import { NavLink, Route, Link } from 'react-router-dom'
import NotesContext from './notesContext'
import AddFolder from './addFolder'
import './sidebar.css'
class Sidebar extends Component {
static contextType = NotesContext
render() {
let notesContext = this.context
const selectedFolder = this.props.match.params.folder_id || {}
return (
<section className="Sidebar">
{notesContext.folders.map(folder => {
return(
<section key={folder.id} className={(selectedFolder && selectedFolder === folder.id)? "SelectedFolder": "Folder"}>
<NavLink className="Folder_Link"
tag='button'
role='link'
to={'/folder/' + folder.id}>
{folder.name}
</NavLink>
</section>
)
})}
<section className="AddFolder_Section">
<NavLink
className="AddFolder_Button"
tag={Link}
to={'/add-folder'}
type='button'
onClick={() => this.AddFolder}
>
Add Folder
</NavLink>
<Route
path='/add-folder'
render={(props) =>
<AddFolder
{...props}
/>
}
/>
</section>
</section>
);
}
}
export default Sidebar;

Answer 1

As I understand your question: AddFolder is your "form" component.
You need to first import your AddFolder component on the parent component that you want to render the form on.
import AddFolder from '../somePath/AddFolder';
Then on your render() function, place the <Route> and simply render the AddFolder component when you are on the add-folder path. Pass props if needed.
<Route
path='/add-folder'
render={(props) =>
<AddFolder
{...props}
/>
}
/>

Answer 2

It turns out I had a typo in the Route defined in my App.js. I needed 'add-folder' instead of 'add_folder'. Now the Route in App works with the NavLink in Sidebar. Yeah!
Here is the App.js:
import React, { Component } from 'react'
import { Route, Switch } from 'react-router-dom'
import Header from './header.js'
import Main from './main.js'
import MainDetail from './mainDetail.js'
import Sidebar from './sidebar.js'
import SidebarDetail from './sidebarDetail.js'
import NotesContext from './notesContext'
import './App.css'
import config from './config'
import AddFolder from './addFolder'
import AddNote from './addNote'
class App extends Component {
state = {
folders: [],
notes: [],
error: null,
};
setData = (notes, folders) => {
this.setState({
notes,
folders,
error: null
})
}
deleteNote = note_id => {
fetch(config.API_ENDPOINT + "/notes/" + note_id, {
method: 'DELETE',
headers: {
'content-type': 'application/json'
}
})
.then(response => response.json())
.then(result => {
const newNotes = this.state.notes.filter(note => note.id !== note_id)
this.setState({
notes: newNotes
})
})
}
addFolder = (name, id) => {
this.setState({
folders: [...this.state.folders, {name, id}]
})
}
componentDidMount() {
Promise.all([
fetch(config.API_ENDPOINT + "/notes"),
fetch(config.API_ENDPOINT + "/folders")
])
.then(responses => {
return Promise.all(responses.map(function (response) {
return response.json();
}));
})
.then(results => {
this.setData(results[0], results[1])
})
.catch(error => this.setState({ error }))
}
render() {
const contextValue = {
notes: this.state.notes,
folders: this.state.folders,
deleteNote: this.deleteNote,
addFolder: this.addFolder
}
//console.log(this.state.notes)
return (
<NotesContext.Provider value={contextValue}>
<section className="App">
<Switch>
<Route
exact path="/"
component={Header}
/>
<Route
path="/folder/:folder_id"
component={Header}
/>
<Route
path="/note/:note_id"
component={Header}
/>
</Switch>
<section className="Section_Sidebar">
<Switch>
<Route
exact path="/"
component={Sidebar}
/>
<Route
path="/folder/:folder_id"
component={Sidebar}
/>
<Route
path="/note/:note_id"
component={SidebarDetail}
/>
</Switch>
</section>
<section className="Section_Main">
<Switch>
<Route
exact path="/"
component={Main}
/>
<Route
path="/folder/:folder_id"
component={Main}
/>
<Route
path="/note/:note_id"
component={MainDetail}
/>
<Route
path="/add-folder"
component={AddFolder}
/>
<Route
path="/add-note"
component={AddNote}
/>
</Switch>
</section>
</section>
</NotesContext.Provider>
);
}
}
export default App;
This is the updated Sidebar.js:
import React, { Component } from 'react'
import { NavLink, Route, Link } from 'react-router-dom'
import NotesContext from './notesContext'
import AddFolder from './addFolder'
import './sidebar.css'
class Sidebar extends Component {
static contextType = NotesContext
render() {
let notesContext = this.context
const selectedFolder = this.props.match.params.folder_id || {}
return (
<section className="Sidebar">
{notesContext.folders.map(folder => {
return(
<section key={folder.id} className={(selectedFolder && selectedFolder === folder.id)? "SelectedFolder": "Folder"}>
<NavLink className="Folder_Link"
tag='button'
role='link'
to={'/folder/' + folder.id}>
{folder.name}
</NavLink>
</section>
)
})}
<section className="AddFolder_Section">
<NavLink
className="AddFolder_Button"
tag={Link}
to={'/add-folder'}
type='button'
>
Add Folder
</NavLink>
</section>
</section>
);
}
}
export default Sidebar;