2

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:

  1. Is there a better alternative way to remove the button or move onto the next page?
  2. If not, how would I store the latest value for contactButton so that the link does not reappear?

Thanks, please note that I am new to React.

Marco Lagos
  • 21
  • 3
  • FYI you should be using the `Link` component, or the `navigate` function for navigation within React Router: https://reactrouter.com/docs/en/v6/getting-started/concepts#link – Cal Irvine Mar 03 '22 at 21:20
  • Use a `Link` component instead of a raw anchor tag. – Drew Reese Mar 03 '22 at 21:20
  • @CalIrvine Okay! Thanks, for my nav bar, can I use bootstrap's Nav.Link or should I still use react router's Link tag? Also, how would you store information after moving onto a new page? Thanks again! – Marco Lagos Mar 03 '22 at 21:35
  • 1
    This question answers my question and is much better worded: https://stackoverflow.com/questions/67305712/force-state-to-maintain-boolean-value – Marco Lagos Mar 03 '22 at 21:59
  • You can use the browser's local storage to store state. – code Mar 03 '22 at 22:15

1 Answers1

-1

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

Mukhriddin Shakhriyorov
  • 316
  • 2
  • 10