Everytime i type, i loose the focus of the input text. I have other compoenets which are working fine; but this one is losing focus, any idea why would this happen?
I tried creating separate components and rendering them in my switch but still not working.
I have other compoenents rendered with Switch statements and are working fine.
const FactionDetail = ({Faction}) => {
const [tab, setTab] = React.useState(0)
const [selectedMember, setSelectedMember] = React.useState(null)
const [receipt, setReceipt] = React.useState('')
const [selectedRank, setSelectedRank] = React.useState(null)
const [newRankDetails, setNewRankDetails] = React.useState({
rankName: '',
wage: 0,
hasPerm: false
})
const menuOption = (tabId) =>{
setTab(tabId)
}
const selectMember = (e) =>{
setSelectedMember(e)
}
const renderDropdownOptions = () =>{
let i = 0
for (const rank in Faction.ranks){
i
return <option key = {i} value = {rank}>{rank}</option>
}
}
React.useEffect(() =>{
if(selectedMember != null && selectedRank != selectedMember.rank){
setSelectedRank(selectedMember.rank)
}
}, [selectedMember])
const RightBody = () =>{
switch(tab){
case 0: // Dashboard
return <>
</>
case 1: //Members
return <> </>
case 2: //Manage
return <>
<div className ='CreateRanks'>
<label>Rank Name</label>
<input style ={{width:'80px'}} onChange = {(e) => setNewRankDetails((prev) => {return {...prev, rankName: e.target.value}})} value = {newRankDetails.rankName}></input>
<label>Wage</label>
<input style ={{width:'80px'}} onChange = {(e) => setNewRankDetails((prev) => {return {...prev, wage: e.target.value}})} value = {newRankDetails.wage}></input>
<label>Has Perm</label>
<input type="checkbox" onChange = {(e) => setNewRankDetails((prev) => {return {...prev, hasPerm: e.target.checked}})} value = {newRankDetails.hasPerm} />
<button onClick = {() =>{ updateClient('factions:createNewRank', newRankDetails)}}>Create</button>
</div>
</>
default:
return<>{tab}</>
}
}
CodePudding user response:
I was rendering two compoenents in the 'main' component; therefor the data from the useStates were mixing and re-rendering.
CodePudding user response:
<input style ={{width:'80px'}} onChange = {(e) => saveDetails(e, 'Rank Name')} value = {newRankDetails.rankName}></input>
const saveDetails=(e, param:string)=>{
e.preventDefault();
if(param==='Rank Name'){
setNewRankDetails((prev) => {...prev, rankName: e.target.value})
}else if(param==='Wage'){
setNewRankDetails((prev) => {...prev, wage: e.target.value})
}
}