score:1
Accepted answer
you can reach that this way:
let navlist = this.state.navlist;
navlist.map(item => {
if (item.name === 'nelayan') {
item.child = // the data you want in array
}
return item;
});
this.setstate({ navlist })
first, make a copy.
then, you should go over each item in array and compare with the data you want to change, for example the item called 'nelayan', and then update the content and return it to the array.
and last set the new state with the new array.
note: you need an unique identifier to do that and be sure you are updating just the item you wanna do it for.
class app extends component {
constructor(props) {
super(props);
this.state = {
personas: [
{ id: 1, nombre: "adolfo" },
{ id: 2, nombre: "juan" }
]
}
}
componentdidmount() {
console.log("componentdidmount")
let personas = this.state.personas
personas.foreach(item => {
if (item.id === 2) item.nombre = "jose"
return item
})
this.setstate({ personas })
}
render() {
console.log(this.state.personas)
return (
<div classname="app">
<header classname="app-header">
<img src={logo} classname="app-logo" alt="logo" />
<h1 classname="app-title">welcome to react</h1>
</header>
<div classname="app-intro">
{
this.state.personas
? this.state.personas.map((item, index) => {
return <p key={index}>
{this.state.personas[index].id} - {this.state.personas[index].nombre}
</p>
})
: ''
}
</div>
{this.state.info ? this.state.info : 'no tengo info'}
</div>
);
}
}
Source: stackoverflow.com
Related Query
- Modify Array of object dimensi with single object
- How to filter and modify an array of objects with a single line of code?
- modify and insert new object in array of objects with useState hook
- How to update a single object inside the array with useReduce on state change
- useState returning a 172 object array 172 times instead of the single object with 172 fields
- How can modify an object of a deep nested array of objects with lodash?
- display all data with only a single object from array of objects
- React.js: loading JSON data with Fetch API and props from object array
- React efficiently update object in array with useState hook
- React native mapping through array with object childs - working different as in react web?
- ReactJS updating a single object inside a state array
- Finding the array index of an object with Javascript/React.js
- How to validate with Yup that in array of objects at least one of object keys has true value?
- Changing object property in an array with React Hooks does not evoke a re-render
- React not updating state with setState with Array of object
- React-router force querystring to be an array with a single element
- ReactJS: replacing object from array with new value replaces whole array
- Add an object with setState() to an array of objects
- How to target single item in list with onClick when mapping JSON array in React
- Filtering an Object in Array with javascript in react native
- ReactJS: Functional component with props defined as Array but seen as Object
- Can I create a Knob in React Storybook to modify an array with 4 values where each value has a select dropdown?
- Convert Array to object with custom keys in JavaScript
- Objects are not valid as a React child (found: object with keys {username}). If you meant to render a collection of children, use an array instead
- Create an Array of Object from another Array of Object with dummy object
- Converting an array into an object with key/value pairs
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- Multiple Select with options as an object array
- TS: Deconstructing an array containing an object and a function (setter) only works with @ts-ignore
- Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead
More Query from same tag
- React-select defaultValue is undefined when submitted
- Reflux: having multiple components access the same Store
- Updating nested redux state
- How to animate label using JavaScript (React JS)
- Redux action.type gives @@redux/INIT
- Error: Uncaught TypeError: Cannot read property 'map' of undefined
- React native button click move to another screen
- Next.Js app.render() doesnt work if I use getRequestHandler with Express Js app
- Get access to the chart.js component instance in React
- Props dont get passed
- How to conditionally show list items in React based on screen size
- how to display "No Data Found" when user type wrong name in input field which is not in API in React
- Why we need to put e.target.name in square brackets []?
- Why is useEffect not working here? Do I need to change the condition?
- Tooltip on disabled Tab - Material Ui, React
- Unable to access attribute of an object
- ReactJS POST Parameters Not Sent
- Fetch Details from 2 APIs and setState according to a dropdown - React Functional Components
- How to change default error message in Yup
- Page freezes when creating component from props
- Cannnot handle the passed array in child component
- 'drupalSettings' is not defined no-undef
- React OnClick for item not working
- My Moment time is changing during Redux reducer
- Promise not returning when using mapDispatchToProps
- How can i create input text fields dynamically in react js - JSX?
- ReactJS: Render data in two columns
- "Functions are not valid as a React child" when trying to use HOC from a module object
- Why do onFocus and onBlur not working in my React app
- React - how to render nested object with renderItem