caremyway-client/src/components/User/ClientFormView.jsx

import React from "react";
import { Container, Form, Header, Message } from "semantic-ui-react";

import Error from "../Shared/Error";

const ClientFormView = ({
  isSendingUserRequest,
  userRequestError,
  userRequestSuccess,
  businessNumber,
  changeBusinessNumber,
  onSubmitClient
}) => (
  <Container>
    <Header>Complete Client Information</Header>
    <Form
      loading={isSendingUserRequest}
      onSubmit={onSubmitClient}
      error={!!userRequestError}
      success={!!userRequestSuccess}
    >
      <Form.Field>
        <label>Business Number</label>
        <input
          placeholder="12345"
          type="text"
          value={businessNumber}
          onChange={changeBusinessNumber}
        />
      </Form.Field>
      <Error header="Modify Client failed!" error={userRequestError} />
      <Message success>
        <Message.Header>Modify Client successful!</Message.Header>
        <p>Set client successfully.</p>
      </Message>
      <Form.Button>Submit Client</Form.Button>
    </Form>
  </Container>
);

export default ClientFormView;