How to Export a Variable to Another file?

Question

const ForgotPassword = ({ ...others }) => {
  const theme = useTheme();
  const { token } = useParams()

  const handleSubmit = async(values) => {
    console.log('load')
    try {
      const response = await axios.post(`http://localhost:3001/auth/reset/${token}`, {
        password: values.password
      });
      if (response.data.msg === 'Password reset token is invalid or has expired') {
        console.log(response)
      } else {
        // success message
      }
    } catch (err) {
      console.error(err);
      console.log("Something went wrong. Please try again later.")
    }
    console.log('not load')
  };


  return (
    //...Content...
  );
};

export default ForgotPassword;

I need to export token to use in other files how to do?
I tried like this

export const token = useParams().token;

export const Token  = token 

etc..

I'm new to this, could anyone tell me how to export token ?

Answer 1

You can't export token directly because it's a local variable and is not available to export at the start of your app. Depending on where token needs to be accessed, you can pass it to a child component with a prop. If this fits your use case, it'll be the easiest method.

If you instead need to access the data from adjacent or parent components, you can set up an application store and access it from parent components. Something like React Redux will do this for you. Take a look at the React Redux Quick Start page for details on how that might work. This is my preferred method, but you can also use React Context instead of an external library to accomplish the same task.