How do I import an input string into another page

Question

What I want is for the user to type in the username and password they created on a login page. upon clicking the Sign In button, this function is triggered

const onSubmit = (event) => {
  event.preventDefault()
  apiClient.signIn(username, password).then((response) => {
    console.log(response)  
    if (response === 'Logged In') {
      return <Redirect to='/forum' /> 
      
    }
    else {
      document.getElementById('error').innerHTML = ("Wrong Username or Password");
    }
  }).catch(error => {
    console.log('Error found when creating meeting');
  })
}

they would be redirected to another page where a text would welcome them in the 'comment' id

return (
        <section class = "index-banner" >          
                           
            <div>
              /* the (username) tag is where the persons username would show up*/
                <body id = "comment" >Welcome (username)</body>
            </div>

        </section>
    )

Only problem is I don't know how to export a string into another page. I'm quite new at React so there are some problems I'm still trying to learn

What is the best way to achieve this?

score 0 · Answer 1 · answered Mar 29 '21 at 18:42

0

You can pass props to redirect. This will help to share props to the desired component at given path. In your case: component defined at "/forum".

The solution to pass props is answered here: https://stackoverflow.com/a/61381519/15273564

answered Mar 29 '21 at 18:42

Viraj Jadhav

94
2
6

only problem, the props such as .props, .location, etc are all undefined. did I do something wrong? – AmmanM Mar 29 '21 at 19:38
As per my attached answer link, have you passed props to the component through route in App.js ? because if props are not passed to that component, it will show as undefined. Just follow the mentioned answer link and let me know if it solves your issue. – Viraj Jadhav Mar 29 '21 at 19:50
Ignore my first question, I did something like this ``` }/>``` but it's still coming undefined. I don't know if I'm doing something wrong. – AmmanM Mar 29 '21 at 20:22
And did you do ? `` – Viraj Jadhav Mar 30 '21 at 04:34
Yes, I added it on my Sign In page so I don't know what I'm doing wrong – AmmanM Mar 30 '21 at 13:39
Can you share a link to your code snippet through code pen or similar platform ? if it's okay. – Viraj Jadhav Mar 30 '21 at 16:34
I don't know how to use codepen but I've saved my codes on github so you're free to check it out. https://github.com/AmmanMeb/Forum/tree/main/src/components – AmmanM Mar 30 '21 at 16:41
P.S, the codes you're looking for are located in App.js, signIn.js, and forum.js – AmmanM Mar 30 '21 at 16:45
Your Forum component is a functional component. You can't do something like `this.props` over there. you need to pass props as a parameter to functional component like this `function Forum(props)` then you can do `console.log(props)` and check if props are being logged. If there are logged, you will your username and password there. Rest all I think is okay. P.S. - I haven't run your project. Let me know. – Viraj Jadhav Mar 30 '21 at 17:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/230555/discussion-between-ammanm-and-viraj-jadhav). – AmmanM Mar 30 '21 at 17:39

score 0 · Answer 2 · answered Mar 29 '21 at 18:44

0

You can do something like this;

<Redirect to={{
            pathname: '/forum',
            state: { username, password} //es6 shorthand syntax
        }}
/>

answered Mar 29 '21 at 18:44

İlker

792
3
14

score 0 · Answer 3 · answered Mar 29 '21 at 19:03

0

Pass the 'username' prop to Redirect.

<Redirect to={{
            pathname: '/forum',
            state: { username }
       }}
/>

Use the prop in your component.

<body id = "comment" >Welcome {props.location?.state?.username}</body> //for functional components
<body id = "comment" >Welcome {this.props.location?.state?.username}</body> //for class components

Note: It would be idle to destructure 'username' from props first. But this would do.

answered Mar 29 '21 at 19:03

Anupama Chauhan

1

Do I have to replace the .location and .state with the actual locations and state and if so, would the location be the name of the first component? – AmmanM Mar 29 '21 at 19:16
No, you do not have to change the '.location' and '.state'. In simple words, the location prop gives information about the route and state is used to pass additional data to the route. (in your case, passing the username string to another route). Hope it helps. – Anupama Chauhan Mar 30 '21 at 20:13

How do I import an input string into another page

3 Answers3