React loses focus on input after the first character-CodePudding

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})
}
}