NextJS - Passing data via property to component for editing - reactjs

Question

I have a page where it will list all books to the admin. And if admin clicks on the EDIT button of any particular book, my app will display a custom modal where it would display the input boxes with the values in it and lets the admin to edit it.
Minimal example of my component:
import styles from '../../styles/EditPopup.module.css'
export default function EditPopup({ show, setPopupVisibility, item_data }){
const onSaveEdit = () => {
//TODO
}
return (
<div className={ styles.popup } style={ show ? {} : { display: 'none' } }>
<input type="text" defaultValue={ item_data.title } />
<input type="text" defaultValue={ item_data.author } />
<textarea defaultValue={ item_data.desc}></textarea>
<button onClick={ () => onSaveEdit() } >SAVE</button>
<button onClick={ () => setPopupVisibility( false ) }>CANCEL</button>
</div>
)
}
Minimal example on my page where it list all books with the edit button:
const [selected_book, setSelectedBook] = useState({ id: '', title: '', author: '', desc: '' })
const [show_edit_popup, setShowEditPopup] = useState(false)
return (
<EditPopup
show={ show_edit_popup }
setPopupVisibility={ (visibility) => setShowEditPopup( visibility ) }
item_data={ selected_book }
/>
<div>
{ all_books.map( (item, i) => (
<div key={ item.id }>
Title: {item.title}
Author: {item.author}
Desc: {item.desc}
<a href="#"
onClick={ (e) => {
e.preventDefault()
setSelectedBook( prev => ({ ...prev, id: item.id, title: item.title, author: item.author, desc: item.desc}) )
setShowEditPopup( true )
} }
>EDIT</a>
</div>
))}
</div>
)
The problem is, it is not working properly in the popup. The for desc will always be empty in the popup. And if I type some new value in any of the inputs and I close the popup and clicks the EDIT button on any other item, the value I entered previously in the inputs will still be there. And secondly am being confused here regarding how to get the new user input. Should I go with the useRef or useState with onChange
I know this is something simple for all of you, but am overthinking I guess.

Answer 1

You are not handling states correctly, So go for it with useState and onChange. For your inputs set an onChange as a callback function that comes from the parent component, pass the event.target.value through it, and set them in the state initiated in the parent.
also, minimize your state's declaration by batching them in one state.
the code could be like this:
import styles from '../../styles/EditPopup.module.css'
export default function EditPopup({ data, handleClosePopUp, onSaveEdit, handleChangeInputs }){
return (
<div className={ styles.popup } style={ data.show ? {} : { display: 'none' } }>
<input type="text" onChange={e => handleChangeInputs(e.target.value, 'title')} value={ data.title } />
<input type="text" onChange={e => handleChangeInputs(e.target.value, 'author')} value={ data.author } />
<textarea onChange={e => handleChangeInputs(e.target.value, 'desc')} value={ data.desc}></textarea>
<button onClick={onSaveEdit} >SAVE</button>
<button onClick={handleClosePopUp}>CANCEL</button>
</div>
)
}
and your parent
const initialData = { show: false, id: '', title: '', author: '', desc: '' }
const [popUpData, setPopUpData] = useState({...initialData})
const handleChangeInputs = (text, type) => {
setPopUpData(data => {...data, data[type] = text})
}
const onSaveEdit = () => {
//do your API call or whatever it updates all_books
}
return (
<EditPopup
handleChangeInputs={handleChangeInputs}
onSaveEdit={onSaveEdit}
handleClosePopUp={ () => setPopUpData({...initialData}) }
data={ popUpData }
/>
<div>
{ all_books.map(item) => (
<div key={ item.id }>
Title: {item.title}
Author: {item.author}
Desc: {item.desc}
<a href="#"
onClick={ (e) => {
e.preventDefault()
setPopUpData({ show: true, ...item})
} }
>EDIT</a>
</div>
))}
</div>
)