I am using React Router to set up my contact page (which consists of multiple pages, nested router):
<Route path="/contact" element={<Contact />}>
<Route path="name" element={<ContactName />} />
<Route path="email" element={<ContactEmail />} />
<Route path="message" element={<ContactMessage />} />
</Route>
When I first go into my contact page, I have a button to move on to the ContactName page (so they can enter their name):
<a
href="/contact/name"
className="contact-icon-color contact-icon-link"
onClick={() => { setContactButton(false) }}>
</a>
When they click the button, I set the display property of the button link to none. This works like I intended. However, when it moves onto the ContactName page, the button reappears again. I understand that the boolean value contactButton is reset with the followoing line in my functional component:
const [contactButton, setContactButton] = useState(true);
I do not know how to overcome this. My questions are:
Thanks, please note that I am new to React.
As I know, you can play with props here.
First, import PropTypes to your project.
https://www.npmjs.com/package/prop-types
Your code similarly looks like the following:
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Route, Link } from 'react-router-dom';
export const Contact = ({ isVisibleButton }) => {
const [contactButton, setContactButton] = useState(isVisibleButton);
return(
<Link to="/contact/name"
className="contact-icon-color contact-icon-link"
onClick={() => { setContactButton(!isVisibleButton) }} />
{contactButton && (
<button>something you want</button>
)}
)
}
Contact.propTypes = {
isVisibleButton: PropTypes.bool,
};
Contact.defaultProps = {
isVisibleButton: true,
};
P.s: Pls, check imports or minor errors, I tried to explain what you asked. And it is, I guess, much better/advanced way rather setting value to localstorage