Scribd
Upload
3 views3 pages

React API

The document contains a React component named StudentForm that utilizes Formik for form handling. It initializes a form with fields for name, email, and age, and submits the data to a placeholder API upon submission. The App component imports and renders the StudentForm component within the main application structure.

Uploaded by

hlatshwayoasiphile2
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views3 pages

React API

The document contains a React component named StudentForm that utilizes Formik for form handling. It initializes a form with fields for name, email, and age, and submits the data to a placeholder API upon submission. The App component imports and renders the StudentForm component within the main application structure.

Uploaded by

hlatshwayoasiphile2
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

StudentForm component

import React from 'react'

import { useFormik } from 'formik';

function StudentForm() {

const formik = useFormik({

initialValues: {

name: '',

email: '',

age: ''

},

onSubmit: async (values) => {

try {

const response = await


fetch('[Link] {

method: 'POST',

headers: {

'Content-Type': 'application/json',

},

body: [Link](values)

});

if ([Link]) {

const result = await [Link]();

[Link]('Submitted data:', values);

[Link]('API response:', result);

alert('Form submitted successfully! Check console for details.');

[Link]();

}
} catch (error) {

alert('Error submitting form');

},

});

return (

<>

<form onSubmit={[Link]}>

<div>

<label>Name:</label>

<input type="text"

{...[Link]('name')}

required

></input>

</div>

<div>

<label>Email:</label>

<input type="text"

{...[Link]('email')}

required

></input>

</div>

<div>

<label>Age:</label>

<input type="text"

{...[Link]('age')}

required
></input>

</div>

<button type='submit' >Submit</button>

</form>

</>

);

export default StudentForm;


[Link]
import logo from './[Link]';

import './[Link]';

import StudentForm from './StudentForm';

import State from './State';

import Counter from './Counter'

function App() {

return (

<div className="App">

<>

<StudentForm/>

</>

</div>

);

export default App;

You might also like