Use Fetch API

[luc-tuyishime]

How to use back end API with this ReactSignupLoginComponent for sign in and sign up

[akiokio]

You can use the getting started example

import ReactSignupLoginComponent from 'react-signup-login-component';

const LoginPage = (props) => {
    const signupWasClickedCallback = (data) => {
      console.log(data);
      alert('Call the backend to create user here.');

    };
    const loginWasClickedCallback = (data) => {
      console.log(data);
      alert('Call the backend to login the user here');
    };
    const recoverPasswordWasClickedCallback = (data) => {
      console.log(data);
      alert('Call the backend to recorver the password here');
    };
    return (
        <div>
            <ReactSignupLoginComponent
                title="My awesome company"
                handleSignup={signupWasClickedCallback}
                handleLogin={loginWasClickedCallback}
                handleRecoverPassword={recoverPasswordWasClickedCallback}
            />
        </div>
    );
};

export default LoginPage;

[luc-tuyishime]

yes yes and after that how can i fetch with resful API ?

[akiokio]

Then you can use a library to "talk" to your data, something like this:

import ReactSignupLoginComponent from 'react-signup-login-component';
import axios from 'axios';

const LoginPage = (props) => {
    const signupWasClickedCallback = (data) => {
      axios.post('/user/create', {
        username: 'Fred',
        password: 123123,
        confirmationPassword: 123123,
      })
      .then(function (response) {
        console.log(response);
        console.log('Handle the UI changes');
      })
      .catch(function (error) {
        console.log(error);
      });
    };
    const loginWasClickedCallback = (data) => {
      axios.post('/user/login', {
        username: 'Fred',
        password: 123123,
      })
      .then(function (response) {
        console.log(response);
        console.log('Handle the UI changes');
      })
      .catch(function (error) {
        console.log(error);
      });
    };
    return (
        <div>
            <ReactSignupLoginComponent
                title="My awesome company"
                handleSignup={signupWasClickedCallback}
                handleLogin={loginWasClickedCallback}
                handleRecoverPassword={recoverPasswordWasClickedCallback}
            />
        </div>
    );
};

export default LoginPage;

But that is already out of the scope of this component

[luc-tuyishime]

thanks guilerme but i have a question how to take value from a dropdown or select list and post it?

On Mon, Aug 20, 2018 at 7:08 PM, Guilherme Akio Sakae < notifications@github.com> wrote:

Then you can use a library to "talk" to your data, something like this:

import ReactSignupLoginComponent from 'react-signup-login-component'; import axios from 'axios';

const LoginPage = (props) => { const signupWasClickedCallback = (data) => { axios.post('/user/create', { firstName: 'Fred', lastName: 'Flintstone', password: 123123, confirmationPassword: 123123, }) .then(function (response) { console.log(response); console.log('Handle the UI changes'); }) .catch(function (error) { console.log(error); }); }; const loginWasClickedCallback = (data) => { axios.post('/user/login', { firstName: 'Fred', lastName: 'Flintstone', password: 123123, confirmationPassword: 123123, }) .then(function (response) { console.log(response); console.log('Handle the UI changes'); }) .catch(function (error) { console.log(error); }); }; return (

);

};

export default LoginPage;

But that is already out of the scope of this component

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/akiokio/ReactSignupLoginComponent/issues/55#issuecomment-414391418, or mute the thread https://github.com/notifications/unsubscribe-auth/ASsv_jWz_7uMg0rmXwDbuYOyG1UjUfuXks5uSuzxgaJpZM4WCkI1 .