i want to upload a set of data to server using form in react and i create a form, in this form i need some dynamic fields also like tokenomics.sale field in data so i don't know how to make this using useState. i'm new to react js and i search too but did not find any example.
import { useState, React } from 'react'
import { AiOutlinePlus } from "react-icons/ai"
import { AiOutlineMinus } from "react-icons/ai"
import "./admin.css"
function Admin(props) {
const [inputValues, setInputValues] = useState({
igo_name: '',
categroy: '',
tge_date: '',
token_type: '',
token_ticker: '',
logo_link: '',
back_img_link: '',
igo_tags: '',
short_decrp: '',
long_decrp: '',
website: '',
twitter: '',
telegram: "",
medium: '',
whitepaper: '',
toke_utility: '',
igo_chars: [],
igo_trailers: [],
tokenomics: { sale: [], all: [] },
backers: [],
team_members: [],
roadmap: [],
cex_listing: [
]
});
const [Charcounter, setCharCounter] = useState(3);
const [Salecounter, setSaleCounter] = useState(1);
// Adding Add Field Functions
const addIgoCharField = () => {
setCharCounter(Charcounter + 1)
}
const addIgoSaleField = () => {
setSaleCounter(Salecounter + 1)
}
const OnHandleChange = (e) => {
const value = e.target.value;
const id = e.target.id;
setInputValues(prev => {
return {
...prev,
[id]: value
}
});
}
// +====================== SETTING TRAILERS HANDLER ======================
const trailerHandler = (e) => {
const { id, className, value } = e.target;
setInputValues(prev => {
const copyData = prev;
copyData.igo_trailers[className] = value;
// console.log(JSON.stringify(copyData, null, 2))
return copyData;
});
}
// +====================== SETTING CHARACTER HANDLER ======================
const characterHandler = (e) => {
const { id, className, value } = e.target;
setInputValues(prev => {
const copyData = prev;
copyData.igo_chars[className] = value;
console.log(JSON.stringify(copyData, null, 2))
return copyData;
});
}
// +====================== SETTING CHARACTER HANDLER ======================
const salerHandler = (e) => {
const { id, className, value } = e.target;
console.log(e.target.dataset.place)
setInputValues(prev => {
console.log("className= " + className + "\nPlace= " + e.target.dataset.place)
const copyData = prev;
const saleData = {
type: copyData.tokenomics.sale[className]?.type,
percent: copyData.tokenomics.sale[className]?.percent,
price: copyData.tokenomics.sale[className]?.price,
tge_percent: copyData.tokenomics.sale[className]?.tge_percent,
cliff: copyData.tokenomics.sale[className]?.cliff,
remain: copyData.tokenomics.sale[className]?.remain,
platforms: [{
logo: copyData.tokenomics.sale[className]?.platforms[e.target.dataset.place]?.logo,
url: copyData.tokenomics.sale[className]?.platforms[e.target.dataset.place]?.url,
}]
};
if (id === 'type') {
saleData.type = value;
} else if (id === 'percent') {
saleData.percent = value;
} else if (id === 'price') {
saleData.price = value;
} else if (id === 'tge_percent') {
saleData.tge_percent = value;
} else if (id === 'cliff') {
saleData.cliff = value;
} else if (id === 'remain') {
saleData.remain = value;
} else if (id === 'logo') {
saleData.platforms[e.target.dataset.place].logo = value;
} else if (id === 'url') {
saleData.platforms[e.target.dataset.place].url = value;
}
copyData.tokenomics.sale[className] = saleData;
return copyData;
});
}
return (
<div className='container admin-pannel'>
{/*==============Adding IGO Here=================*/}
<div className='cards add-igo'>
<div className='add-igo-expand'>
<h3>Add IGO</h3>
<button className="add-igo-expand-icon" onClick={() => setIsAddIgoShowing(prev => !prev)}>{isAddIgoShowing ? <AiOutlineMinus /> : <AiOutlinePlus />}</button>
</div>
{
isAddIgoShowing &&
<div className='add-igo-form-wrapper'>
<form className='add-igo-form'>
<div className='add-details-1'>
<input type='text' onChange={OnHandleChange} id="igo_name" placeholder='IGO Name' />
<input type='text' onChange={OnHandleChange} id="categroy" placeholder='IGO Category' />
<input type='text' onChange={OnHandleChange} id="tge_date" placeholder='IGO TGE Date' />
<input type='text' onChange={OnHandleChange} id="token_type" placeholder='IGO Token Type' />
<input type='text' onChange={OnHandleChange} id="token_ticker" placeholder='IGO Token Ticker' />
<input type='text' onChange={OnHandleChange} id="logo_link" placeholder='IGO Logo Link' />
<input type='text' onChange={OnHandleChange} id="back_img_link" placeholder='IGO Back Image Link' />
<input type='text' onChange={OnHandleChange} id="igo_tags" placeholder='IGO Tags' />
<input type='text' onChange={OnHandleChange} id="short_decrp" placeholder='IGO Short Decrp(max 30 words)' />
<input type='text' onChange={OnHandleChange} id="long_decrp" placeholder='IGO Long Decrp' />
<input type='text' onChange={OnHandleChange} id="website" placeholder='IGO Website' />
<input type='text' onChange={OnHandleChange} id="twitter" placeholder='IGO Twitter' />
<input type='text' onChange={OnHandleChange} id="telegram" placeholder='IGO Telegram' />
<input type='text' onChange={OnHandleChange} id="medium" placeholder='IGO Medium' />
<input type='text' onChange={OnHandleChange} id="whitepaper" placeholder='IGO Whitepaper' />
<input type='text' onChange={OnHandleChange} id="toke_utility" placeholder='IGO Token Utility' />
</div>
<div className='common-section add-igo-trailer'>
<h3>Add IGO Trailers</h3>
<section>
<input type='text' onChange={trailerHandler} className={0} id="igo_trailers" placeholder='IGO Trailer 1' />
<input type='text' onChange={trailerHandler} className={1} id="igo_trailers" placeholder='IGO Trailer 2' />
</section>
</div>
<div className='common-section add-igo-char'>
<h3>Add IGO Characters</h3>
<section>
{Array.from(Array(Charcounter)).map((c, index) => {
return <input type='text' onChange={characterHandler} id="igo_chars" placeholder={`IGO Char ${index + 1}`} className={index} />
})}
</section>
<div className='add-feild-btn-container'>
<span className='add-fieild' onClick={addIgoCharField}>Add Character</span>
</div>
</div>
<div className='common-section add-igo-tokenomics'>
<h3>Add IGO Tokenomics</h3>
<section>
<input type='text' onChange={OnHandleChange} id="total_supply" placeholder='Token Total Supply' />
</section>
</div>
{/* ============================Adding Tokenomics=====================*/}
<div className='common-section add-igo-sale'>
<h3>Add IGO Sale</h3>
<p>{JSON.stringify(inputValues, null, 2)}</p>
<section>
{
Array.from(Array(Salecounter)).map((c, index) => {
return (
<div>
<input type='text' onChange={salerHandler} className={index} id="type" placeholder={`Sale Type ${index}`} />
<input type='text' onChange={salerHandler} className={index} id="percent" placeholder='Sale Percent' />
<input type='text' onChange={salerHandler} className={index} id="price" placeholder='Sale Price Per token' />
<input type='text' onChange={salerHandler} className={index} id="tge_percent" placeholder='Sale at TGE' />
<input type='text' onChange={salerHandler} className={index} id="cliff" placeholder='Sale Cliff' />
<input type='text' onChange={salerHandler} className={index} id="remain" placeholder='Sale Vesting' />
{
Array.from(Array(4)).map((c, index_a) => {
return (
<div className='sale-platform'>
<input type='text' onChange={salerHandler} className={index} data-place={index_a} id="logo" placeholder={`Sale Platform ${index_a + 1} Logo`} />
<input type='text' onChange={salerHandler} className={index} data-place={index_a} id="url" placeholder={`Sale Platform ${index_a + 1} Url`} />
</div>
)
})
}
</div>
)
})
}
</section>
<div className='add-feild-btn-container'>
<span className='add-fieild' onClick={addIgoSaleField}>Add Sale</span>
</div>
</div>
</form>
</div>
}
</div>
<div className='cards update-igo'></div>
<div className='cards delete-igo'></div>
</div>
)
}
export default Admin
what type of json object i need
{
trending: 12,
name: "Apex Legends",
logo: 'https://www.pngitem.com/pimgs/b/128-1283122_jacksepticeye-png.png',
back_image: "https://c4.wallpaperflare.com/wallpaper/615/444/957/wraith-apex-legends-apex-legends-hd-wallpaper-preview.jpg",
category: "Battle royale",
tags: "#TopIGO #LOL #Play2Earn ",
views: '10.5k',
rating: "8",
likes: "15.2k",
token_type: "BSC-20",
token_ticker: "FURY",
short_decrp: "Apex Legends is a free-to-play battle royale-hero shooter game developed by Respawn Entertainment and published by Electronic Arts.",
long_decrp: "Apex Legends is a free-to-play battle royale-hero shooter game developed by Respawn Entertainment and published by Electronic Arts. It was released for Microsoft Windows, PlayStation 4, and Xbox One in February 2019, for Nintendo Switch in March 2021, and for PlayStation 5 and Xbox Series X/S in March. ",
website: "https://t.me/pixelbit_ann",
telegram: "https://t.me/pixelbit_ann",
twitter: "https://t.me/pixelbit_ann",
TGE: "13-MAY-20222",
igo_chars: [
"https://www.pngitem.com/pimgs/b/455-4553161_legends-png.png",
"https://www.pngitem.com/pimgs/b/536-5365765_legends-png.png",
"https://www.pngitem.com/pimgs/b/145-1457964_body-png.png"
],
trailers: [
"https://drive.google.com/uc?id=11W7HF-IDu5VW09vM5Aop40QcpckTn_2z",
"https://www.youtube.com/watch?v=Jcr8qmrnOKE"
],
token_utility: "The Main Token Of Engines Of Fury Will Be Based On The ERC-20 Standard And Bridged To BSC. However, We Are Also Currently Looking Into Other Cross-Chain Solutions Such As Polygon And Solana, That Might Be Added Soon After The Launch.$FURY Is The Project Token In Which A Public Sale Will Be Held. It Is The Game Transaction Token, Which Will Be Used To Exchange For Other Crypto-Currencies, Buy Or Forge Nfts, Participate In Arenas, And For Staking.",
tokenomics: {
total_supply: 50000000000,
sale: [
{
type: "Seed Sale",
percent: 1,
price: 0.0001600,
vesting: {
tge_percent: 10,
cliff: "3 Months",
remain: "24 Months"
},
platforms: [
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
}
]
},
{
type: "Private Sale",
percent: 15,
price: 0.0003,
vesting: {
tge_percent: 10,
cliff: "3 Months",
remain: "24 Months"
},
platforms: [
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
}
]
},
{
type: "Public Sale",
percent: 3,
price: 0.0003,
vesting: {
tge_percent: 20,
cliff: "3 Months",
remain: "12 Months"
},
platforms: [
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
},
{
name: 'DAO Maker',
logo: 'https://drive.google.com/uc?id=19IW-FOkzlQfWGwX5a2o3khw0SLqh0B-h',
url: ''
}
]
}
],
all: [
{
type: "Team",
percent: 18,
vesting: {
tge_percent: 0,
cliff: "6 Months",
remain: "24 Months"
}
},
{
type: "Community",
percent: 2,
vesting: {
tge_percent: 20,
cliff: "3 Months",
remain: "12 Months"
}
},
{
type: "Advisors",
percent: 6,
vesting: {
tge_percent: 0,
cliff: "6 Months",
remain: "24 Months"
}
},
{
type: "Staking",
percent: 7,
vesting: {
tge_percent: 0,
cliff: "3 Months",
remain: "24 Months"
}
},
{
type: "Liquidity",
percent: 1,
vesting: {
tge_percent: 100,
cliff: "0 Months",
remain: "0 Months"
}
},
{
type: "Treasury",
percent: 25,
vesting: {
tge_percent: 2,
cliff: "0 Months",
remain: "24 Months"
}
},
{
type: "Marketing",
percent: 18,
vesting: {
tge_percent: 2,
cliff: "0 Months",
remain: "24 Months"
}
},
{
type: "Exchange Reserve",
percent: 3,
vesting: {
tge_percent: 10,
cliff: "3 Months",
remain: "24 Months"
}
},
{
type: "Airdrop",
percent: 1,
vesting: {
tge_percent: 0,
cliff: "1 Months",
remain: "1 Months"
}
},
]
}[check this image so you can get idea what i want to make][1]
[1]:
