form-without-formik.jsx

import React, { Component } from "react";
import styled from "styled-components";
import { Form, Input, Title, Text, Button } from "./theme.js";

const Label = styled.label`
  display: flex;
  flex-direction: column;
  color: #777;
  font-family: "Raleway", sans-serif;
  font-size: 0.8em;
  margin: 0.5em 0;
  position: relative;
`;

class App extends Component {
  render() {
    return (
      <div>
        <Title>Form</Title>
        <Form>
          <Label>
            Email *
            {errors.email && <Text color="red">{errors.email}</Text>}
            <Input
              border={errors.email && "1px solid red"}
              type="text"
              name="email"
              placeholder="Email"
            />
          </Label>
          <Label>
            Password *
            {errors.password && <Text color="red">{errors.password}</Text>}
            <Input
              border={errors.password && "1px solid red"}
              type="password"
              name="password"
              placeholder="Password"
            />
          </Label>
          <Button type="submit">Submit</Button>
        </Form>
      </div>
    );
  }
}