Why my form input is typing per 1 letter and then stop if passing props

Question

I know this before but I forgot how did I do it..so basically let say I have

    const [showItem,setShowItem] = useState({})


    const [updateName,setUpdateName] = useState('')

and then I have a props function that will do something like this...this props is callable for array of items and I want to do this to make it more cleaner and reuseable.

<ItemsEdit items={showItem} setUpdateName_= { setUpdateName } updateName = { updateName } ></ItemsEdit>

Now as you see, when I'm trying to pass my setUpdateName_ and updatename.

UPDATE This is the map for my items that will call the <ItemsEdit/> for specific id only in my buttons. (but this not affect anything in form)

                {nfts.map((nft,i) => {

                    return(
                        <div 
                            className="items" 
                            key={nft.id}
                        >
                            {showItem.id == nft.id ? <>
                                <form onSubmit={handleSubmit}>
                                    
                                    <ItemsEdit 
                                        items={showItem} 
                                        setUpdateName= { setUpdateName } 
                                        updateName = { updateName }
                                    />
                                    
                                </form>
                            </> : <>
                                <Items items={nft}></Items>
                            </>}


                        </div>
                    )
                })}

and here is the <ItemsEdit/>

so for every key that I press it will lose the focus in input but when I used autoFocus = "autoFocus" in the input text it will works but the only thing is that it will the same text in other items..so its not the best idea for me.

    const ItemsEdit = ({items,setUpdateName,updateName}) => {
        return (
            <>
                <input 
                    id='name'
                    type="text" 
                    key="text"
                    // autoFocus="autoFocus"
                    value = {updateName}
                    placeholder="NFT name"
                    onChange={ e => setUpdateName( e.target.value )}    
                ></input>
                <p>{items.id}</p>
                <img src={items.data.img} alt="" />
                <div className="buttons">
                    <button
                    type='submit'> 
                        Update 
                    </button>
                    <button type='submit' className='left'
                    onClick={
                        () => {
                        setShowItem({})}
                    }>
                        <ion-icon name="arrow-back-circle-outline"></ion-icon>
                    </button>
                </div>
            </>
        )
    }

Does this answer your question? [In React ES6, why does the input field lose focus after typing a character?](https://stackoverflow.com/questions/42573017/in-react-es6-why-does-the-input-field-lose-focus-after-typing-a-character) — Ryan Le, Jul 16 '22 at 02:23
I already tried the autoFocus="autoFocus" but it will used the same input text as I used in some other items..so that means its not really the answer for me... — Myth Vince, Jul 16 '22 at 02:25
@RyanLe and I don't used react-forms and react-components for me hehehe sorry abt that. — Myth Vince, Jul 16 '22 at 02:29
I think you're missing the point. The dupe suggestion isn't _exact_, but it's the same fundamental behavior and solution (32 different suggestions at the time of writing) so I suggest taking a closer read through the canonical thread, since many people have had the same problem. Did you try checking to ensure the form wasn't rerendering on every keystroke? Also, please share a [mcve]--the code here is disjointed and hard to run and reproduce. — ggorlen, Jul 16 '22 at 02:50

score 0 · Answer 1 · answered Jul 16 '22 at 03:25

I now have an answer but this kinda nasty for me

so for the <ItemsEdit/> I would call it something like this

            {ItemsEdit(
                 {items:showItem,
                   setUpdateName:setUpdateName,
                   updateName:updateName}
            )}

and just remove the return of and change the { } into ( )just like this

    const ItemsEdit = ({items,setUpdateName,updateName}) => (
    
    )

Why my form input is typing per 1 letter and then stop if passing props

1 Answers1