FunctionalStatefullComponent.js

import React, { useState } from 'react';

const Button = ({ children, variant = 'button' }) => {
  return (
    <button style={{ background: variant === 'button' ? 'blue' : 'green'}}>
      { children }
    </button>
  )
};

const Input = ({ value, onChange, label }) => {
  return (
    <input
      type="text"
      name={label}
      placeholder={label}
      value={value}
      onChange={ onChange }
    />
  )
}


const SignUp = ({}) => {
  const [username, setUsername] = useState('');
  const handleSubmit = (evt) => {
    evt.preventDefault();
    console.log({ username });
  }
  return (
    <form onSubmit={handleSubmit}>
      <Input
          name="username"
          placeholder="username"
          value={username}
          onChange={ (evt) => setUsername(evt.target.value.slice(0, 10)) }
      />
      <Button variant='button'>Sign up</Button>
      <Button variant='link'>Sign up</Button>
    </form>
  );
};

export default SignUp;

StatefullClassComponent.js

import React from 'react';

const Button = ({ children, variant = 'button' }) => {
  return (
    <button style={{ background: variant === 'button' ? 'blue' : 'green'}}>
      { children }
    </button>
  )
};

const Input = ({ value, onChange, label }) => {
  return (
    <input
      type="text"
      name={label}
      placeholder={label}
      value={value}
      onChange={ onChange }
    />
  )
}


class SignUp extends React.Component {
  state = { username: '' };
  setUsername = (evt) => setUsername(evt.target.value.slice(0, 10));
  handleSubmit = (evt) => {
    evt.preventDefault();
    console.log({ username: this.state.username });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <Input
            label="username"
            value={this.state.username}
            onChange={ this.setUsername }
        />
        <Button variant='button'>Sign up</Button>
        <Button variant='link'>Sign up</Button>
      </form>
    );
  }
}

export default SignUp;