75 lines
1.5 KiB
JavaScript
75 lines
1.5 KiB
JavaScript
import React, { useState } from 'react'
|
|
import array from './array';
|
|
import { v4 as uuid } from 'uuid';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
|
|
export default function Create() {
|
|
|
|
// Making usestate for setting and
|
|
// fetching a value in jsx
|
|
const [name, setname] = useState('');
|
|
const [age, setage] = useState('');
|
|
|
|
// Using useNavigation for redirecting to pages
|
|
let history = useNavigate();
|
|
|
|
// Function for creating a post/entry
|
|
const handelSubmit = (e) =>{
|
|
e.preventDefault(); // Prevent reload
|
|
|
|
const ids = uuid() // Creating unique id
|
|
let uni = ids.slice(0,8) // Slicing unique id
|
|
|
|
// Fetching a value from usestate and
|
|
// pushing to javascript object
|
|
let a = name, b=age
|
|
array.push({id:uni,Name:a,Age:b})
|
|
|
|
|
|
// Redirecting to home page after creation done
|
|
history('/')
|
|
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1>Create</h1>
|
|
<form
|
|
onSubmit={e => handelSubmit(e)}
|
|
>
|
|
<label>
|
|
Enter name (input:{name}):
|
|
<input
|
|
onChange={e => setname(e.target.value)}
|
|
type="text"
|
|
placeholder="Enter Name"
|
|
required
|
|
/>
|
|
</label>
|
|
<label>
|
|
Enter name (input:{age}):
|
|
<input
|
|
onChange={e => setage(e.target.value)}
|
|
type="text"
|
|
placeholder="Enter Age"
|
|
required
|
|
/>
|
|
</label>
|
|
<button
|
|
onClick={e => handelSubmit(e)}
|
|
type="submit"
|
|
>
|
|
Create
|
|
</button>
|
|
<Link
|
|
to='/'
|
|
>
|
|
<button>
|
|
Home
|
|
</button>
|
|
</Link>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|