For Search ,Table and Pagination =>react-data-table

for select => react select

for date => we have moment or luxon

for Id=> we have uuidv4

for validation => we have validator

for state management

Redux=>redux , react-redux , redux-thunk

var items = [{ id:1,name: 'Edward', rating: 21 },{ id:2,name: 'Sharpe', rating: 37 },{ id:3,name: 'And', rating: 45 },{ id:5,name: 'Magnetic', rating: 13 },{ id:6,name: 'Zeros', rating: 37 }];const data=items.sort(function(a, b) {var nameA = a.name.toUpperCase(); // ignore upper and lowercasevar nameB = b.name.toUpperCase(); // ignore upper and lowercaseif (nameA < nameB) {return -1;}if (nameA > nameB) {return 1;}// names must be equalreturn 0;});console.log(data)// rating-asc// const result=items.sort((a,b)=>{//   return a.rating- b.rating// })// console.log(result)//rating-dsc// const result1=items.sort((a,b)=>{//   return b.rating- a.rating// })// console.log(result1)

Here e.target.files will return an array “ FileList [ File ] “

So we need to do as const data= e.target.files[0] this will return and object

{  name: "carbon(1).png",lastModified: 1627472392919, webkitRelativePath: “”,size: 143187,type: “image/png” }

For display image we need use URL.createObjectURL(file)

<img src={URL.createObjectURL(file)}/>

See below code

import React, { useState } from 'react'const uploadForm = (props) => {
const [file,setFile]=useState('')

const handleChange=(e)=>{
const data=e.target.files[0]
setFile(data)
}
return (
<div>
<input type="file" onChange={handleChange}/>
{file &&

<div>
<span>{file.name}</span>
<img src={URL.createObjectURL(file)}/>
</div>
}
</div>
)
}
export default uploadForm

I am not gonna go with full explanation as you already know what your are expecting for

So lets get to the Code

import React, { useState } from "react";const CheckboxExampleToggle = () => {const [name, setName] = useState(false);const handleChange = () => {setName(!name);};return (<div><h1>Without usign any library</h1><input type="checkbox" checked={name} onChange={handleChange} />{} Select the terms and condition<br /><br/><buttondisabled={!name}style={{ color: name ? "green " : "red", padding: "10px" }}>Register</button></div>);};export default CheckboxExampleToggle;

Happy coding…..

Go to your Favorite code editor and create-react-app

and Install semantic-React-UI Package from npm or officially from semantic-React-UI website https://react.semantic-ui.com

To work with semantic react-UI You need add

import ‘semantic-ui-css/semantic.min.css’ in to your index.html

after adding refresh your web-browser if you see the changes then your good to

import React from ‘react’

import { Checkbox,Button } from ‘semantic-ui-react’

import React,{useState} from 'react'import { Checkbox,Button } from 'semantic-ui-react'const CheckboxExampleToggle = () =>{const [name,setName]=useState(false)       setName(!name)
}
return (
<div>
<Checkbox toggle checked={name} onChange={handleChange}/> <p>Accept the terms and Condition</p> <Button color={name? 'green' :'red'} disabled={!name}>Send Data</Button> </div> )
}
export default CheckboxExampleToggleHappy coding...

if you don’t have Github account then create

command One => git init

Command Two (optional) =>To ignore files just create a new file called .gitignore (dot)

add file with name / text or /data.js

command Three => git add .(dot)

command Four (optional) =>git status

To work further you need to set global name

git config — global user.name “ you name”

git config — global user.email “your email”

command Fifth=> git commit -m “initial commit”

to check there is any file in the staging area

use command git status

after login Click on + icon on top right…

Note here Select option (or drop down) is Not work if

<html><head><title>Post</title></head><body><div id="root"></div><script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!--semantic-React --><script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" …

const { useState, useEffect } = React;const App = () => {const [namesArray, setNamesArray] = useState(["google"]);const [name, setName] = useState("");const handleChange = (e) => {const result = e.target.value;setName(result);};const handleSubmit = (e) => {e.preventDefault();const newArray = namesArray.concat(name);setNamesArray(newArray);setName("");};const removeItem = (i) => {const newArray = [...namesArray];newArray.splice(i, 1);setNamesArray(newArray);};//Edit functionalityconst editItem = (index) => {const nameInput = prompt("Enter new name");if (nameInput.trim().length !== 0) {const result = namesArray.map((ele, i) => {if (index === i) {return [...nameInput];} else {return…

Prafull Kumar

I am ReactJs Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store