score:3
Accepted answer
- make sure to destructure the
details
from props ineditsectioncomponent
. - in your parent, the initial state i.e.
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}))
};
Source: stackoverflow.com
Related Query
- To update a property in object in Array with React functional component
- React efficiently update object in array with useState hook
- Changing object property in an array with React Hooks does not evoke a re-render
- ReactJS: Functional component with props defined as Array but seen as Object
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- Issue with window object on a functional react component
- React array state keeps resetting on update in functional component
- react update array of object with checked field in state
- how to update specific index of integer array in functional component setState in react js
- Update all Object Elements of a State Array with React Hooks
- React Functional Component Re-renders exponentially with array state change
- React Hooks Form Handling: Update the state of an object with multiple string items and one array item
- Update an array inside an object with unique value in react with hook
- Problem with updating object property in array of objects in React
- React functional component with non-JSX class has an internal array returning undefined
- React / ES6 - Efficiently update property of an object in an array
- Update Object with an array using React States
- React update state array object single property
- How to update an object element in array with specific index, React State
- React Component does not update when receiving an array of objects with reverse order. What can I do to make it updated?
- React component does't display options after setting state, firestore returning empty array with object in it? I'm confused
- How to update value of a key in object in an array with the new value in React useState in TypeScript
- React Functional component with Typescript: Typescript does not understand changing property types
- React props object vs array component update
- get only that object from array of which which has the property true in react with typescript
- how to append object array to current state in react functional component
- How to Translate string in array of objects with using react-i18next Without a functional component of a react
- React reusable form group checkboxes component need to pass an array object with its props
- Trying to update a property in an object inside array of arrays mongodb with node js
- React Functional Component update property change
More Query from same tag
- How to stack elements (cards) horizontally in a row within a parent element (div)
- React preview images after inserting input type files
- New Google Sign In library prompt at every page reload
- filter out the row data while searching from input
- Antd apply tooltip on to the Collapse.Panel header section
- TypeError: Cannot read property 'group' of undefined
- Can't position elements on top of each other - CSS Bootstrap ReactJS
- How can I get d3 in a React component to render in a Jest snapshot
- State not updating when executing onChange function in React
- Replace Tags in Email Template
- How to integrate javascript libraries into react?
- Set image as full background in React.js
- Form isnt seen in Netlify dashboard from Gatsby site
- Material UI : How to use my own image in avatar
- Material UI - Open LeftNav / Drawer on AppBar click
- React useEffect gets error - Missing Dependency
- the marker is added after the second click state hasn't been updated with the newItem you added yet?
- React: Bind number input to state (handle intermediate values)
- ERROR in ./node_modules/axios/lib/adapters/http.js
- react-scroll-parallax <ParallaxProvider/> to a div
- Reactjs Styled-components not working properly
- How to prevent re-render with reselect?
- How to implement radio button in React Native
- A more performance-friendly way to use setInterval() in componentDidMount when fetching data
- react js jest unit testing
- How to get specific value from react Component
- Having trouble updating a React component using a Hook with a timer
- Property 'calendar' does not exist on type 'typeof client'
- How to pass data from a page to another page using react router
- ReactJS Axios pass data and upload image using Multer