score:0

Accepted answer
import React from 'react'
import Axios from 'axios';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import {Formik, Form, Field, ErrorMessage} from 'formik';
import * as Yup from 'yup';
import Homepage from '../HomepageComponents/Homepage';

function CreatePost() {

    const createPosts = (data) => {
        Axios.post('http://localhost:3001/createPosts', {
            postName: data.postName,
            postText: data.postText
          }).then((response) => {
            console.log(response)
        });
    }

    const validationSchema = Yup.object().shape({
      name: Yup.string().required(),
      body: Yup.string().required()
    });

    const initialValues = {
        name: '',
        body: ''
    }

    return (
        <div className='createPost'>
        <h1>Create post</h1>

        <Formik initialValues={initialValues} onSubmit={createPosts} validationSchema={validationSchema}>
        <Form className='loginForm'>
          <ErrorMessage name='name' component='div'/>
            <Field 
            id='createPostName'
            name='name'
            placeholder='Name'
            />

            <ErrorMessage name='body' component='div'/>
            <Field 
            id='createPostBody'
            name='body'
            placeholder='Text'
            />
            <button type='submit'>Create Post</button>
        </Form>
        </Formik>

        <Link to='/home'>Post</Link>
        <Router>
          <Switch>
            <Route path='/home' exact component={Homepage}/>
          </Switch>
        </Router>

        </div>
        
    )
}

export default CreatePost;



Related Query

More Query from same tag