SignUp.js

import React, { Component } from 'react'
import { Link } from 'react-router'

import SignUpForm from '../components/SignUpForm'

class SignUp extends Component {
    constructor(props) {
        super(props)

        this.state = {
            username: '',
            email: '',
            password: ''
        }
    }
    handleInputChange = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }
    handleSubmit = (e) => {
        e.preventDefault()

        console.log(this.state)
    }
    render() {
        return (
            <div>
                <SignUpForm onSubmit={this.handleSubmit}
                    onChange={this.handleInputChange}/>
                <span>
                    Already have an account?
                    <Link to='/login'>Log In</Link>
                </span>
            </div>
        )
    }
}

export default SignUp

SignUpForm.js

import React from 'react'

import Form from '../atoms/Form'
import Input from '../atoms/Input'
import Btn from '../atoms/Btn'

const SignUpForm = (props) => {
    return (
        <Form onSubmit={props.onSubmit}>
            <Input type='text' placeholder='Username'
                name='username' onChange={props.onChange} />
            <Input type='email' placeholder='Email'
                name='email' onChange={props.onChange} />
            <Input type='password' placeholder='Password'
                name='password' onChange={props.onChange} />
            <Btn text='Sign Up' />
        </Form>
    )
}

export default SignUpForm