使用 React 功能组件更新 Array 中 object 中的属性

Question

I have an input field which is written in a child component and its inside return function

const EditSectionComponent = ({
    editCaption,
    editName,
}) => {
    const {name,caption} = details;

    return (
        <input
        type="text"
        className="imageNameDetails"
        value={name}
        onChange={e => editName(e.target)}
        />  
    )
}

and in parent Component, it's like

  const onEditClick = id => {
    const selectedAsset = All.find(i => i.id === id);
    setDetails(selectedAsset);
}

const [details, setDetails] = useState([]);

const editName = target => {
    setDetails({ ...details, [name]: target.value })
};

Initial page load I can see both caption and name in the text field, but I am not able to change its value

It's not updating the UI. Is the right way to reflect the newly edited text in the input field

Answer 1

• Make sure to destructure the details from props in EditSectionComponent .
• In your parent, the initial state ie details is defined as an array. It need to be an object.
• Also while doing setDetails , you need to specify the key. (not a dynamic name in your case)

Updated code is here:

const EditSectionComponent = ({
    editCaption,
    editName,
    details,
}) => {
    const {name,caption} = details;

    return (
        <input
        type="text"
        className="imageNameDetails"
        value={name}
        onChange={e => editName(e.target)}
        />  
    )
}

const [details, setDetails] = useState({name: '', caption: ''});

const editName = target => {
    setDetails(prev => ({...prev, name: target.value}))
};