If in Members.jsx I have
const showMembers = () => {
const [state, setState] = useState('create');
return (
...
<Button href="/CreateMember" value={4} onClick={setState('edit')}>Edit</Button>
...
)
}
Now when that button is clicked, I want to send (or see) the value and the state to another file called CreateMember.jsx, as seen in the href. So basically, when the button is clicked, redirect user to /CreateMember, with the value 4 and ‘edit’.
How can I do this?
In CreateMember.jsx, I have something like this
const CreateMember = () => {
let state = state Recieved From The redirect
const id = id Recieved From The redirect
if(state === 'edit')
fetch('/api/getMemberByID', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({id: id})
})
}
else { ... }
}
—————— Update ———————
I’m using Routes like below
import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App() {
return (
<>
<Buttons />
<BrowserRouter>
<Routes>
<Route path='/' element={<Content />}></Route>
<Route path='/CreateMember' element={<Content />}></Route>
<Route path='*' element={<PageNotFound />}></Route>
</Routes>
</BrowserRouter>
</>
);
}
The Content just looks like this
const Content = () => {
const URL = window.location.pathname.split('/')[1];
const renderPage = (url) => {
switch (url) {
case 'CreateMember':
return CreateMember()
...
default:
return PageNotFound()
}
}
return (
renderPage(URL)
)
}